Question

我正在尝试创建3列布局，其中结构应为main，left column，right column。主列是自动宽度以填充页面的其余部分。

不幸的是我无法更改HTML，目前是这样的：

<div class="wrap">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

是：这意味着我无法更改div的顺序。

我找到了一些解决方案，其中一个是使用display: table-cell，但使用float时会出现问题。第二个解决方案是使用flexbox进行布局，这是一个非常好的解决方案，但我不能使用它，因为IE9不支持这种CSS样式。

只是为了重申目标：我的需要是左右固定宽度，主要将填充其余的自由空间。

＆LT; --- 250像素 - ＆GT;＆LT; ----------------自动宽-------------＆GT;＆LT ; --- --- 200像素GT＆;
＆LT; --- -----左＆GT;＆LT; ------------------主---------------- - ＆GT;＆LT; --- -----右＆GT;

在没有任何JavaScript的情况下，有没有人在纯CSS中有任何解决方案？

Answer 1

两种方法：

HTML

<div class="wrap">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

更好（但在IE9中不支持）方式

.wrap {
    display:flex;
}

.left {
    flex-basis:250px;
}

.right {
    flex-basis:200px;
}

.main {
    flex-grow:1;
}

有点黑客，但在IE9（但不是IE8或某些移动浏览器）方式支持

.wrap {
    display:block;
}

.left {
    width:250px;
}

.right {
    width:200px;
}

.main {
    width:calc(100% - 450px);
}

UPDATE ：如果您想动态添加/删除列，只需在CSS文件中添加一些额外的类：

.main.no-left {
    width:calc(100% - 200px);
}

.main.no-right {
    width:calc(100% - 250px);
}

.main.no-left.no-right {
    width:100%;
}

根据需要通过JS动态应用类。其他任何东西都需要一个JS解决方案，它实际上将宽度设置为内联样式，或者使用position:absolute;，这可以真正快速，真实地快速。

Answer 2

您可以尝试分别向左和向右浮动侧边栏，然后对.main div应用一些填充以防止它们重叠。

<style>
.left {float: left; width: 250px;}
.right {float: right; width: 200px;}
.main {padding: 0 200px 0 250px;}
</style>

<div class="wrap">
  <div class="right">right</div>
  <div class="left">left</div>
  <div class="main">main</div>
</div>

https://jsfiddle.net/1ofqkLmw/

请注意，在此标记中，我已将main div移至wrap的最后一个孩子。

另请注意，您也可以使用边距而不是填充 - 如果您不希望边框和背景与侧边栏重叠，那么边距就是最佳选择。

Answer 3

你走了。简单的CSS解决方案。记住，你应该总是清理你的花车。

enter image description here

HTML

    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
    <div class="clear"></div>

CSS

.main, .left, .right {
    min-height: 250px;
}
.left {
    float: left;
    background-color: green;
    width: 50px;    
}
.right {
    float: right;
    background-color: blue;
    width: 50px;    
}
.clear {
    clear: both;
}
.main {
    background-color: gray;
}

JSFiddle：http://jsfiddle.net/18rvc23q/

Answer 4

您可以在.main上使用左右边距的混合，然后在.left和.right列的绝对位置。

<强> HTML

<div class="wrap">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

<强> CSS

.wrap {
    position: relative;
}
.main {
    border: 1px dashed red;
    margin: 0 100px;
    min-height: 300px;
}
.left,
.right {
    width: 100px;
    min-height: 300px;
    position: absolute;
    top: 0;
}
.left {
    left: 0;
    background-color: yellow;
}
.right {
    right: 0;
    background-color: blue;
}

这是一个实际的jsFiddle：http://jsfiddle.net/1u9gzyh6/

Answer 5

我认为这可以解决您的问题：

＆＃13;

.main, .left, .right {
    height: 250px;
}

.left {
    float: left;
    background-color: green;
    width: 50px;
    position: relative;
    margin-left: -300px; // negative width of main   
}

.right {
    float: left;
    background-color: blue;
    width: 80px;
    margin-left: 50px; // width of left
}

.main {
    width: 300px;
    background-color: gray;
    float: left;
    position: relative;
    left: 50px; // width of left
}

.wrap:after {
    content: "";
    clear: both;
}

＆＃13;

<div class="wrap">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

＆＃13;

Answer 6

<强>编辑：

<style>
div {
    margin: 0;
    padding: 0
}
div.main-wrapper {
    overflow: hidden;
    width: 700px;
    margin: 0 auto;
}
div.left-wrapper {
    float: left;
    width: 500px;
}
div.left-col {
    float: left;
    width: 200px; /*change to what value you desire*/
    background-color: #5446EB;
    height: 400px;
}
div.main-col {
    background-color: #DDEB46;
    height: 400px;
}

div.right-col {
    float: right;
    width: 200px;   /*change to what value you desire*/
    background-color: #EB838D;
    height: 400px;
}
</style>
<div class="main-wrapper">
    <div class="left-wrapper">
        <div class="left-col">
            insert content of the left col here
        </div>
        <div class="main-col">
            insert content of the main col here.  
        </div>
    </div>
    <div class="right-col">
        insert content of the right col here
    </div>
</div>

三列布局，带有自动宽度中心列

6 个答案: