防止div在调整浏览器大小时保留
无论浏览器窗口的大小如何调整，我都希望第二个子div与第一个div保持在同一行。这两个图像都是标题(绿色div)的一部分。我已经尝试了在这里提出的其他问题，并尝试了空格:nowrap，float:left，将块从inline更改为inline-block并返回，但都没有帮助。
我想学习，最简单，最干净的方式来实现它，而不是使用hack，因为在阅读了一大堆教程后，我显然仍然不明白它是如何工作的。
<div style="background:green;">
<div style="display:inline-block;">
<img src="" width=150 height=80>
<br>
Some text
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>回答 3
Stack Overflow用户
发布于 2013-11-29 15:48:48
试试这个：
<div style="background:green;position: relative;">
<div style="display:inline-block; position: absolute; left: 0; top:0;">
<img src="" width=150 height=80>
Some text
</div>
<div style="display:inline; position: absolute; left: 50%; top: 0;">
<img src="" width=728 height=90>
</div>
</div>Stack Overflow用户
发布于 2013-11-29 16:07:44
在这里您可以使用flex属性。
<style>
body{
display:flex;
}
.container{
width:100%;
display:flex;
flex-direction:row;
}
.container > div{
width:50%;
background:#ccc;
border:thin solid #000;
}
</style>
<!doctype html>
<html>
<body>
<div class="container">
<div>
your first image here
</div>
<div>
your second image here
</div>
</div>
</body>
</html>Stack Overflow用户
发布于 2013-11-30 12:24:59
我找到了一个非常简单的解决方案:包含两个父div而不是一个。第一个具有灵活的宽度，用于用标题背景/颜色填充整个屏幕顶部。第二个是固定宽度，宽度足以容纳两个图像。第二个容器将两个图像“捕获”在固定宽度内，并且不允许它们继续。
第一个子容器是内联块(所以我可以在它下面包含“一些文本”)，第二个子容器是常规内联。通过这种方式，我可以向子容器添加填充或边距。
我不是一个程序员，我意识到这个解决方案可能不受欢迎，但它是唯一有效的:)没有浮动的左/右，绝对位置，空格nowrap或div clear是必需的！
<div style="background:green";>
<div style="width:1000px;">
<div style="display:inline-block; padding-left:15px; padding-right:40px">
<img src="" width=150 height=80>
<br>
Text under the header
</div>
<div style="display:inline;">
<img src="" width=728 height=90>
</div>
</div>
</div>https://stackoverflow.com/questions/20280580
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号