0

这个问题的解决方案可能非常简单，但我已经为此苦苦挣扎了一段时间，我就是无法让它工作。我想让 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

4

4 回答 4

3

添加vertical-align: top;- 在这里查看小提琴：http: //jsfiddle.net/b3LUZ/1/

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

于 2013-09-13T13:00:27.570 回答
1

您可以使用“ 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>

你可以参考小提琴： //jsfiddle.net/aasthatuteja/eyrAn/

如果这能解决您的问题，请告诉我。

享受！

于 2013-09-13T13:21:04.177 回答
1

您的代码中有错误..有一个错误类型的结束标签..应该是</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>
于 2013-09-13T13:04:28.077 回答
0

在这里试试这个演示

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;
}
于 2013-09-13T13:04:37.853 回答