Question

这是我的问题。我是CSS的新手让我感到很冷淡。我想简单地为我的网站设计3个div：Left Bar，News和Right Bar。我希望左栏有15px的左边距和最小的边距与新闻15px。右栏同样但右边距。我希望新闻div始终处于中心位置，宽度为700px或类似于我现在还不知道究竟有多少。而且我不知道如何使它们排成一行。我的意思是当一个人正在调整他的浏览器大小时，我希望新闻总是在中心，但当它达到关键的15px时，它会停止。我正在寻找这个约2小时，并尝试任何dipslays，浮动等，但也许我想念......

我的divs：

<div id="main">
    <div id="leftbar">
    </div>

    <div id="newsContainer">
        @RenderBody()

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </div>


    <div id="rightbar">

    </div>
</div>

我的CSS现在：

#leftbar
{
    width: 300px;
    margin: 0 15px;
    background-color: red;
}

#newsContainer
{
    width: 700px;
    margin: 0 auto;
    background-color: blue;
}

#rightbar
{
    width: 200px;
    margin: 0 15px;
    background-color: yellow;
}

并且我希望它像这样：

http://imagizer.imageshack.us/v2/1000x795q50/538/RENDkl.jpg

@Edit：在这个小提琴中它是完美的但不知何故右边栏在这两个div之下

http://jsfiddle.net/sirithcam/x3nw5hvg/

Answer 1

您只需使用主列上的display: table和列上的display: table-cell即可执行此操作。

Demo Here

#main {
    display: table;
    width: 100%;
    border-spacing: 15px 0;
}
#leftbar, #rightbar, #newsContainer {    
    display: table-cell;
    border: 1px solid;
    text-align: center;
}
#leftbar {
    width: 20%;
}
#newsContainer {
    width: 60%;
}
#rightbar {
    width: 20%;
}

Answer 2

我认为你可以尝试使用float来做这个。对于三个div，所有都设置它们浮动到左边。第二个将自动处于中心位置。如果你想把div位置固定，你需要使用{position：absolute;左：像这样的px;}。

Answer 3

如果您不介意稍微调整HTML，这是一种简单的方法如果你想使用花车。

开始于：

<div id="main">
        <div id="leftbar">Left Bar</div>    
        <div id="rightbar">Right Bar</div>
        <div id="newsContainer">News</div>
</div>

并使用以下CSS：

#main {
    width: 100%;
    min-width: 430px;
}
#leftbar, #rightbar, #newsContainer {    
    border: 1px dotted blue;
}
#leftbar {
    float: left;
    width: 100px;
}
#newsContainer {
    width: 200px;
    margin: 0 auto;
}
#rightbar {
    float: right;
    width: 100px;
}

根据您的示例，您可能希望固定宽度的列具有不同的空白他们之间有点。

要将浮点数保持在同一行，请务必将min-width: 430px添加到#main。

请参阅演示：http://jsfiddle.net/audetwebdesign/5vpf3n6c/

根据您的需要，可以提供其他解决方案。 CSS表解决方案也是一个不错的选择。

在中心显示一个内联的div

3 个答案: