Question

得到固定div为40px ，我需要将放在两个自动宽度div的中间

<div class="container">
      <div class="row">
          <div style="min-height:60px; width:auto fill left"></div>
          <div style="width:40px; min-height:60px;"></div>
          <div style="min-height:60px; width:auto fill right"></div>
      </div>
</div>

Answer 1

尝试在display: table;上设置.container，在display: table-row;设置.row，在内部DIV设置display: table-cell;。

Answer 2

这是一个非常常见的问题，无论如何尝试这个！

CSS：

html, body {
    height: 100%;
}

.wrapper {
    width: 100%;
    min-width: 700px; /* .center and combined min-width we want for .left and .right */
    position: relative;
    overflow: hidden;
}
.wrapper > div {
    min-height: 100%; /* set to whatever height you want */
}
.left {
    width: 50%;
    float: left;
    margin-right: -250px; /* half of .center */
}
.left > div {
    margin-right: 255px; /* half of .center with 5px extra padding */
}
.center {
    width: 500px;
    float: left;
    background: #e0e0e0;
    position: relative;
    z-index: 3;
}
.right {
    width: 50%;
    float: right;
    margin-left: -250px; /* half of .center */
}
.right > div {
    margin-left: 255px; /* half of .center with 5px extra padding */
}

HTML：

    <div class="wrapper">
        <div class="left">
            <div>
                <p>Left column content.</p>
            </div>
        </div>
        <div class="center">
            <p>Center column content.</p>
        </div>
        <div class="right">
            <div>
                <p>Right column content.</p>
            </div>
        </div>
    </div>

CodePen：http://codepen.io/anon/pen/akjpL

我没有时间解释上面代码在我编写时的作用，所以我现在给出一个简短的解释。

.left和.right都浮动到各自的边并设置为等于页面的50％的宽度以准确并排放置，它们的边距设置为负值我们所做的一半.center。然后我们需要为每个.left和.right创建子div，并将它们的边距设置为与我们设置为父div的负值相同的正值加上一些可以玩的填充 - 如在填充中添加到边距。现在我们已经为.center留出了空间，它的宽度将再次是.left和.right的负边距的正总和，我们将它向左浮动它适合中间！如有任何问题，请随时提出！

div自动宽度，div固定宽度，div自动宽度

2 个答案: