Question

我认为自己是一名中级/高级CSS / HTML编码器，但我对如何做以下情况感到困惑。我开始认为这是不可能的，但我真的很想相信它是......

假设包装宽度为1000px。

其中有三列。两个外部列的宽度相同，宽度由中心列决定。中间列是唯一一个有内容的列，只有一行文本，两边有30px的填充。因此，如果内容行是填充的100px，那么其他两列将是（1000-100）/ 2 ...

是否有动态方法让两个外部列调整到由其变化的内容（一行文本）定义的中心列的变化宽度？

我想要完成的图形：

Answer 1

我能想到的最接近的是使用display：table;和表格单元格。这会创建您正在寻找的动态效果，但如果不为中心元素设置明确的宽度，我认为您无法获得所需的效果。

HTML：

<div id="wrap">
    <div id="left">
        Left
    </div>
    <div id="center">
        center
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS：

#wrap
{
    width: 1000px;
    display: table;
}

#wrap div
{
    display: table-cell;
    border: 1px solid #000;
    width: auto;
}

#center
{
    padding: 0 30px;
    text-align: center;
}

你可以check out my attempt here，它有一些按钮供你查看不同的状态，宽度开/关和添加文本等（jQuery与解决方案无关）

我认为这与纯粹的CSS一样接近。

Answer 2

好的'救援表：

http://jsfiddle.net/hgwdT/

实际上我觉得桌子是魔鬼，但这就像你描述的那样有效。所以这里是在子div上使用display: table-cell，因此在功能上使用更好的标记是相同的：

http://jsfiddle.net/XXXdB/

中心元素确实可以具有动态宽度;为了防止内容被压扁，我只需在white-space: nowrap添加p包含文字。

除了Chrome之外，我还确认此解决方案适用于IE8和FF。

Answer 3

这不是最优雅的解决方案，但它确实有效。我想走纯CSS路线，但无法弄明白。很好的工作，jblasco和Kyle Sevenoaks，想出来了！

这是我的jsFiddle demo。如果你不介意使用一点JavaScript（在我的例子中使用jQuery）：

<强> HTML：

<div id="wrapper">
    <div class="side"></div>
    <div id="middle">One line of text.</div>
    <div class="side"></div>
</div>

<强> CSS：

#wrapper {
    margin: 0 auto;
    width: 1000px;    
}

#wrapper div {
    float: left;   
    height: 300px;
}

.side {
    background: #ddd;   
}

#middle {
    background: #eee;  
    padding: 0 30px;
    text-align: center;
}

<强> JavaScript的：

var adjustSize = function(){
    // Declare vars
    var wrapper = $('#wrapper'),
        middle = $('#middle'),
        totalWidth = wrapper.width(),
        middleWidth = middle.width(),
        middleOuterWidth = middle.outerWidth(),
        remainingWidth = totalWidth - middleOuterWidth,
        sideWidth;

    if(remainingWidth % 2 === 0){
        // Remaining width is even, divide by two
        sideWidth = remainingWidth/2;
    } else {
        // Remaining width is odd, add 1 to middle to prevent a half pixel
        middle.width(middleWidth+1);
        sideWidth = (remainingWidth-1)/2;  
    }

    // Adjust the side width
    $('.side').width(sideWidth);
}

动态调整两个外部列到中心列的可变宽度

3 个答案: