Question

在发布此问题之前，我查看了其他一些问题。没有其他事情能做到我想要的。

我的目标是创建一个三列布局，但使用＆＃34; tout＆＃34;从中间栏的页面顶部中心垂下来。该粉丝应该与页面下方的公司徽标保持一致，页面文本在该页面下流动。

HTML非常简单，容器中有三个div，后跟徽标的div，然后是正文副本：

    <div class="container">
    <div class="topcontain">
        <div class="topleft">testing left</div>
        <div class="topcenter"><img class="floatimg" src="toutdemo.png"></div>
        <div class="topright">testing right</div>
    </div>
    <div class="bodypart">
        <div class="logo"><img src="demologo.png"></div>
        <div class="bodycopy">
            <p>Lorem ipsum dolor sit amet...etc</p>
        </div>
    </div>
    </div>

CSS基于我认为的简单对齐：

.container {
    text-align: center;
}
.topcontain {
    width:80%
    text-align:center;
    height:125px;
}
.topleft {
    width:35%;
    float:left;
}
.topcenter {
    width:256px;
    float:left;
}
.topright {
    float:right;
    width:35%;
}

.bodycopy {
    text-align:left;
}

我把fiddle放在一起，这表明了我的两个问题：

布局在大尺寸下效果很好，但是当视口变窄时，右列会下降和/或想要蜷缩在中间（在浏览器中比在小提琴中更容易看到）。
部分原因是问题＃1，有时很难保持兜售和徽标一致。

是的，最终这将使用流体图像，但暂时一切都是静态的。看起来像一个简单的布局......但不是！

Answer 1

我更新了你的小提琴： http://jsfiddle.net/Znz2P/10/

左右浮动div：

width: calc(50% - 128px);

左右div将分享剩余空间，减去中心的设定宽度（除以2）

logo上的

：

.logo { clear: left; }

并折叠边框：

.topcontain > div {     
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

我还添加了一个'clearfix'类，对于只运行浮动元素的容器来说这很好。

Answer 2

因为中心div有固定宽度，而左边和右边有35％宽度。您可以从＆＃34; topright＆＃34;中删除宽度。 div或设置max-width：＆＃34; topcenter＆＃34;类

三栏CSS布局

2 个答案: