Question

我希望第二个子div与第一个div保持在同一行，无论浏览器窗口的大小调整多少。两个图像都是标题的一部分（绿色div）。我试图按照这里提出的其他问题尝试空白：nowrap，float：left，将块从内联更改为内联块和后退，没有任何帮助。

我想学习，这是实现这一目标的最简单，最简洁的方法，不使用黑客，因为在阅读了一堆教程后，我显然仍然不明白这是如何工作的。

<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>

Answer 1

试试这个：

<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>

Answer 2

您可以在此处使用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>

Answer 3

我找到了一个愚蠢的简单解决方案：它包含两个父div而不是一个。第一个具有灵活的宽度，用于填充标题背景/颜色的整个屏幕顶部。第二个是固定宽度，宽度足以包含两个图像。该第二个容器“捕获”固定宽度内的两个图像，并且不允许它们携带。

第一个子容器是内联块（因此我可以在其下面包含“Some text”），第二个子容器是常规内联。这样我就可以为子容器添加填充或边距。

我不是程序员，并且意识到这个解决方案可能不受欢迎，但它是唯一有效的:)没有浮动左/右，绝对位置，白色空间nowrap或div清除是必需的！

<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>

调整浏览器大小时防止div继续运行

3 个答案: