如何对齐 3 个 div 左中右？ [复制]

Posted 2023-03-05

【中文标题】如何对齐 3 个 div 左中右？ [复制]

【英文标题】：How to align 3 divs left-center-right? [duplicate]

【发布时间】：2013-02-14 13:49:52

【问题描述】：

如何在一行左中右对齐 3 个 div 而无需定义明确的尺寸？

Left 应该最左对齐，右对齐到右边缘。

以下不起作用：

<div style="float: left;">
    left
</div>
<div style="float: right;">
    right
</div>
<div style="margin: 0 auto;">
    center
</div>

【问题讨论】：

当我这样做时，通常 3 个中至少有 2 个具有我可以指定的尺寸，而我只需将第三个调整为其他两个

我不明白你写的代码有什么问题。它就像你描述的那样：jsfiddle.net/tagCs

【参考方案1】：

<div style="width:100%;margin:0 auto; padding: 0">
     <div style=" float:left;width:32%;border: thin solid black">
         left
     </div>
     <div style=" float:left;width:32%;border: thin solid black">
         center
     </div>
     <div style=" float:left;width:32%;border: thin solid black">
          right 
     </div>
 </div>
 <div style="clear:both">
 </div>

【讨论】：

你试过了吗？它对我不起作用：jsfiddle.net/eqAyg

我不小心将浮动属性输入到主 div 的样式中。它应该在每个内部 div 中。

【参考方案2】：

这是一个示例，说明如何按正确的顺序放置浮点数。

jsFiddle Example

<div class="square" style="float: left;">left</div>
<div class="square" style="float: right;">right</div>
<div class="square" style="margin:0 auto  !important;">center</div>


.square 
width:50px;
height:50px;
background-color:#ff0000;
text-align:center;
border: 1px solid #000;

【参考方案3】：

添加包装器div 并提供text-align:center

CSS

.wrap
        text-align:center
    

HTML

<div class="wrap">
<div class="left">
    left
</div>
<div class="right">
    right
</div>
<div class="center">
    center sdv dg sdb sdfbh sdfhfdhh h dfh
</div>
    </div>

DEMO

【讨论】：

我已经将 text-align: center 应用到 3 张图片的包装上，有人能解释一下为什么会这样吗？

【参考方案4】：

试试这个

CSS

divwidth:33%;

HTML

<div style="float: left;border:1px solid red;">
    left
</div>
<div style="float: right;border:1px solid green;">
    right
</div>
<div style="margin: 0 auto;border:1px solid blue;">
    center
</div>

【参考方案5】：

在不了解内容和布局模式的情况下，实际上是不可能做到的。但作为一个起点，你可以试试这个：

html：

<div class="clearfix holder">
    <div class="column left">
        Some Contents Here...
    </div>
    <div class="column middle">
        Some Contents Here...
    </div>
    <div class="column right">
        Some Contents Here...
    </div>
</div>

CSS：

.clearfix:before,
.clearfix:after 
    content: " ";
    display: table;

.clearfix:after 
    clear: both;

.clearfix 
    *zoom: 1;

.holder
    text-align:center;

.column
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:auto;

.left
    background-color:#ff0;
    float:left;

.middle
    background-color:#f0f;
    margin:0 auto;

.right
    background-color:#0ff;
    float:right;

DEMO