使用边距和浮动水平对齐 div

Question

我有 3 个 divs - 每个都在 parent div 中，宽度为 100%。 CSS:

 .parentDiv {
  height: 454px;
  width: 100% auto;
}
.Div1, .Div2, .Div3{
  display: block;
  position: relative;
  text-align: center;
  height: 434px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.Div1 {
  margin-left: 10px;
  float: left;
  width: 351px;
}
.Div2 {
  width: 351px;
  padding: 0px;
  margin: auto;
  display: block;
}
.Div3 {
  margin-right: 10px;
  float: right;
  width: 351px;
}

Div 的排序方式与 CSS、HTML 中的排序方式相同。然而，这样做的结果是左边的元素 (Div1) 在正确的位置，假设居中的元素居中 (Div2) 尽管它的两边都有填充整个 parent Div。因此，我认为这会导致 Div3 垂直溢出 parent Div 和 "collapse"。

我真正想知道的是如何将 div 对齐，使一个在左边，一个居中，一个在右边。在这种情况下，之前关于类似问题的问题似乎对我没有帮助：/如果有一种方法可以缩短 Div2 的边距，以便它们可以让所有 Divs 保持正确对齐在 parent div - 我真的很想知道如何（最好不要使用绝对像素测量）

这可能毫无意义 - 但我真的很感激所有 suggestions/answers :) 干杯

补充说明：这就是目前的情况： Div1Div2Div3 我想要什么： Div1 Div2 Div3 这个的长度等于parentDiv

HTML（对于本节）

    <div class="parentDiv">

        <div class="Div1">
            <!--Insert code here-->
        </div>

        <div class="Div2">
            <!--Insert code here-->
        </div>

        <div class="Div3">
            <!--Insert code here-->
        </div>

    </div>

Answer 1

尝试在 div2 上执行此操作：

 .Div2 {
      width: 351px;
      padding: 0px;
      margin: auto;
      display: block;
      margin: 0 auto;
      float: left;
    }

Answer 2

解决方案#1

您可能会看到 JSFIDDLE DEMO。

HTML 代码

<div class="parentDiv">
    <div class="Div1">
        Div 1 - Some text
    </div>        
    <div class="Div2">
        Div 2 - Some text
    </div>       
    <div class="Div3">
        Dive 3 - Some text
    </div>           
</div>

CSS 代码

 .parentDiv {
  height: 454px;
  width: 100% auto;
}
.parentDiv div{
    float:left;
}
.Div1, .Div2, .Div3{
  display: block;
  position: relative;
  text-align: center;
  height: 434px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #c4c4c4;
}
.Div1 {
  margin-left: 10px;
  width: 351px;
}
.Div2 {
  width: 351px;
  padding: 0px;
  display: block;
}
.Div3 {
  margin-right: 10px;
  width: 351px;
}

解决方案 # 2

请通过FIDDLE DEMO。

这里是完整的源代码：

我已经为所有 3 个 div 添加了 margin-left。

代码：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
 .parentDiv {
  height: 454px;
  width: 100% auto;
}
.parentDiv div{
    /* float:left; */
}
.Div1, .Div2, .Div3{
  display: block;
  position: relative;
  text-align: center;
  height: 434px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #c4c4c4;
}
.Div1 {
  margin-left: 10px;
  width: 351px;
}
.Div2 {
    display: block;
    margin-left: 361px;
    padding: 0;
    width: 351px;  
}
.Div3 {
    margin-left: 714px;
    width: 351px;
}
</style>
</head>
<body>
<div class="parentDiv">
    <div class="Div1">
        Div 1 - Some text
    </div>        
    <div class="Div2">
        Div 2 - Some text
    </div>       
    <div class="Div3">
        Dive 3 - Some text
    </div>           
</div>
</body>
</html>

如您所见：

我已经从 Div2 中删除了 margin。
我为 .parentDiv div 添加了新的 css - 所以您可以从其他单独的 div 中删除 float。
您可能希望删除 div 的 BORDER。

我的建议

我建议使用响应式断点使您的页面 响应式。

Answer 3

如果您想要比浮动元素更好的解决方案，请将其更改为 display:inline-块元素。

.parentDiv > div { font-size: 1em; display: inline-block; vertical-align: top; }
.parentDiv { font-size : 0; }

这是响应式的，比浮动更好。 float 仅适用于浮动元素，不适用于设计布局。这是一些前端开发人员使用的错误且最常见的技术。感谢浮动，您可以在页面上看到数千吨的 clearfix。它是垃圾，废话。

Answer 4

别担心，终于用一些方法解决了它 jQuery:

$(document).ready(function(){
    var width = $(".parentDiv").css("width")
    var width = width.replace("px","");
    var width = parseInt(width,10);
    var val1 = width-1073;
    var val2 = val1/2;
    $(".Div2").css("margin-left",val2);
    $(".Div2").css("margin-right",val2);

    $(window).resize(function(){
        var width = $(".parentDiv").css("width");
        var width = width.replace("px","");
        var width = parseInt(width,10);
        if(1073>width) {
            $(".Div3").css("display","hidden")
        }
        else {
            var val1 = width-1073;
            var val2 = val1/2;
            $(".Div2").css("margin-left",val2);
            $(".Div2").css("margin-right",val2);
        }
    });

我知道这不是有史以来最高效也不是最漂亮的代码（我是 jQuery 和 Javascript 的新手）- 但它确实有效 :) 我想向任何好心地试图破译我骇人听闻的解释的人：/

注意我也设置了ChildDiv的定位类型为absolute，然后Div1如左：0； Div3 如右：0;

使用边距和浮动水平对齐 div

Horizontally aligning divs using margins and floats

html

css

alignment

margin