Question

解决这个问题的方法可能非常简单，但我一直在努力解决这个问题，但是我无法让它发挥作用。我希望有2个不同大小的div彼此相邻排列。问题是，如果我将任何文本放入第一个div中，则另一个文本会向下移动几行。

问题的简化版本如下所示：

<html>
    <body>
        <div>
        <div style="background:red; display:inline-block; height:100%; width:50%;">
            aaa<br>
            aaa<br>
            aaa<br>
            aaa<br>
        </div>
        <div style="background:green; display:inline-block; height:5em; width:5em;">
            bbb
        </div>
        <div>
    </body>
</html>

另外，我宁愿不使用“位置”属性，因为我无法预测“bbb”div的大小，我想在“bbb”下放一些更小的div

Answer 1

添加vertical-align: top; - 请参阅此处的小提琴：http://jsfiddle.net/b3LUZ/1/

此外，您的第一个<div>没有结束标记，只是另一个开放标记。

Answer 2

您的代码中有错误。有一个错误输入的结束标记..应该是</div>，而不是<div>。

但是，我更喜欢将float css属性设置为“left”而不是display: inline-block。

在您的div之后，您可以将“clear”css属性设置为“both”的div。像这样：

    <div style="background:red; float:left; height:100%; width:50%;">
        aaa<br>
        aaa<br>
        aaa<br>
        aaa<br>
    </div>
    <div style="background:green; float:left; height:5em; width:5em;">
        bbb
    </div>
    <div style="height: 0; width: 0; margin: 0; padding: 0; clear:both;"></div>

Answer 3

您可以使用“float:left”属性代替“display:inline-block”

请参阅以下代码：

<div>
    <div style="background:red; float:left; height:100%; width:50%;">
        aaa<br>
        aaa<br>
        aaa<br>
        aaa<br>
    </div>
    <div style="background:green; float:left; height:5em; width:5em;">
        bbb
    </div>
    <div style="clear:both"></div>
    <p>To make sure rest of the content doesn't float and rather comes below these divs, give clear:"both" class after floating divs</p>
<div>

您可以参考小提琴：http://jsfiddle.net/aasthatuteja/eyrAn/

如果这可以解决您的问题，请与我们联系。

享受！

Answer 4

试试 DEMO HERE

HTML

    <div>
        <div class="first">
            aaa<br>
            aaa<br>
            aaa<br>
            aaa<br>
        </div>
        <div class="second">
            bbb
        </div>
    </div>

CSS

.first{
    background:red;
    display:inline-block; 
    height:100%;
    width:50%;
}
.second{
    background:green; 
    display:inline-block;
    height:5em; 
    width:5em;
    vertical-align:top;
}

使用CSS定位

4 个答案: