35

我的目标是<div>并排显示两个 s，两个 s 的内容<div>在顶部对齐。我不希望第二个中的长文本<div>包裹在第一个下方。

最后，我不想设置第二个的宽度，<div>因为我需要标记以不同的宽度工作。

示例标记位于http://jsfiddle.net/rhEyM/下方。

CSS

.left-div {
    float: left;
    width: 100px;
    height: 20px;
    margin-right: 8px;
    background-color: linen;
}
.right-div {
    float: left;
    margin-left: 108px;
    background-color: skyblue;
}​

HTML

<div class="left-div">
    &nbsp;
</div>
<div class="right-div">
    My requirements are <b>[A]</b> Content in the two divs should line
    up at the top, <b>[B]</b> Long text in right-div should not wrap
    underneath left-div, and <b>[C]</b> I do not want to specify a
    width of right-div. I don't want to set the width of right-div
    because this markup needs to work within different widths.
</div>

​</p>

4

3 回答 3

45

尝试使用 Flex，因为那是 html5 的新标准。

http://jsfiddle.net/maxspan/1b431hxm/

<div id="row1">
    <div id="column1">I am column one</div>
    <div id="column2">I am column two</div>
</div>

#row1{
    display:flex;
    flex-direction:row;
justify-content: space-around;
}

#column1{
    display:flex;
    flex-direction:column;

}


#column2{
    display:flex;
    flex-direction:column;
}
于 2014-09-18T00:43:14.903 回答
23

我从第二个 div 中删除了浮动以使其工作。

http://jsfiddle.net/rhEyM/2/

于 2012-04-04T06:50:13.027 回答
9

试试这个：（http://jsfiddle.net/TpqVx/）

.left-div {
    float: left;
    width: 100px;
    /*height: 20px;*/
    margin-right: 8px;
    background-color: linen;
}
.right-div {

    margin-left: 108px;
    background-color: lime;
}​​

<div class="left-div">
    &nbsp;
</div>
<div class="right-div">
    My requirements are <b>[A]</b> Content in the two divs should line up at the top, <b>[B]</b> Long text in right-div should not wrap underneath left-div, and <b>[C]</b> I do not want to specify a width of right-div. I don't want to set the width of right-div because this markup needs to work within different widths.
</div>
<div style='clear:both;'>&nbsp;</div>

提示：

  • 只float:left在你最左边的 div 中使用。
  • 没有真正的理由使用height，但无论如何......
  • <div 'clear:both'>&nbsp;</div>在最后一个 div 之后使用的好习惯。
于 2012-04-04T06:50:28.737 回答