在中心显示一个内联的 div答案

【问题标题】：Displaying divs inline with one on center在中心显示一个内联的 div
【发布时间】：2014-11-05 21:00:08
【问题描述】：

好吧，这是我的问题。我是 CSS 新手，所以对我很冷淡。我想用 3 个 div 为我的网站做简单的设计：左栏、新闻和右栏。我希望左栏的左边距为 15 像素，新闻为 15 像素的最小边距。在右栏上相同，但有右边距。我希望新闻 div 始终位于中心，宽度为 700 像素或类似的东西，我现在不知道到底有多少。而且我不知道如何让他们排队。我的意思是当一个人调整他的浏览器大小时，我希望新闻总是在中心，但是当它达到关键的 15 像素时，它会停止。我在搜索这个大约 2 小时，并尝试了任何 dipslays、float 等，但也许我错过了。

我的 div：

<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

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

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

【问题讨论】：

类似的东西：stackoverflow.com/questions/18420917/… ?
你能和我们分享一个小提琴吗？
我很确定你可以使用 float:left; 来实现你的目标。边距，你也可以尝试使用百分比作为宽度，而不是绝对像素值。你有我可以使用的 js fiddle 吗？我就是这么懒:)
jsfiddle.net/sirithcam/x3nw5hvg 现在可以完美配合左栏和新闻，但不知何故右栏不太好，我的意思是浮动和显示：表格

标签： html css

【解决方案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%;
}

【讨论】：

【解决方案2】：

我认为你可以尝试只使用浮动来执行此操作。对于三个 div，都将它们设置为浮动到左侧。第二个会自动居中。如果你想把 div 的位置固定，你需要使用 {position: absolute;左：???px;} 像这样。

【讨论】：

当我想调整浏览器的大小时，div 会浮动到网站的底部，所以这不是我的意思，而在“中心”中，我的意思是它在网站的中心而不是div
是这样的吗？stackoverflow.com/questions/5012111/…
jsfiddle.net/sirithcam/x3nw5hvg 这里很完美，但不知何故右栏位于两个 div 下方：/
只需使用宽度和浮动即可。我改变了你的代码，看看这个。您可以通过添加一些边距来更改确切位置。 jsfiddle.net/x3nw5hvg/1

【解决方案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 表格解决方案也是不错的选择。

【讨论】：