DIV 布局使用浮动或块内将 div 向右对齐答案

【问题标题】：DIV layout aligning div to the right using float or in-blockDIV 布局使用浮动或块内将 div 向右对齐
【发布时间】：2012-07-05 04:11:19
【问题描述】：

我正在尝试将一些 div 对齐到此结构中，但没有任何效果。

<div>
     <div>top</div>
     <div>middle
          <div>left</div> <div>right</div>
     </div>
     <div>bottom</div>
</div>

我尝试过使用带有绝对值、块等的浮点数，我得到的最接近的是块内联，但我需要右对齐的 div 只是靠近左 div，我添加了 text-align right 而没有任何乐趣。

非常感谢 D

【问题讨论】：

你能设置一个 jsfiddle 以便我们也能看到你的 CSS 吗？
给你jsfiddle.net/zHscZ

标签： html css

【解决方案1】：

试试这个

<div>
    <div>top</div>
    <div>
        <div style="float:left;">left</div>
        <div style="float:left;">right</div>
    </div>
    <div style="clear:both;">bottom</div>
</div>

带有 clear:both 的底部 div 可能还不够，但在这个特定示例中可以解决问题

为此谷歌清除修复

【讨论】：

【解决方案2】：

给left 和right div 一个width 并让他们float

确保您还通过在下面添加一个额外的 div 来清除浮动：clear: both;

代码：

<div id="wrap">
     <div id="top">top</div>
     <div id="mid">
         <div id="left">left</div>
         <div id="right">right</div>
         <div class="clear"></div>
     </div>
     <div id="bot">bottom</div>
</div>

CSS：

div {
    background: #ccc;
    height: 15px;
    margin-bottom: 10px;
}

.clear {
    clear: both;
}

#wrap {
    width: 400px;
}

#top {

}

#mid {

}

#left {
    float: left;
    width: 200px;
}

#right {
    float: left;
    width: 200px;
}

#bot {

}

查看实际代码：http://jsfiddle.net/GZg6y/

【讨论】：

【解决方案3】：

你可以通过不同的方式做到这一点，一种是通过 float css 属性，确保你指定宽度，如本例所示：

<div class="container">
<div class="top">top</div>
<div class="middle">
   <div class="left">left</div> <div class="right">right</div>
</div>
<div  class="bottom">bottom</div>

你的 CSS 应该是这样的：

.left{
float:left;
width:50%;
background:green;
}
.right{
float:right;
width:50%;
background:blue;
}
.bottom{
clear:both;
}

看这里http://jsfiddle.net/M3met/1/

【讨论】：