三列CSS布局 [英] Three Column CSS Layout

问题描述

在发布这个问题之前，我看了几个其他问题。没有其他什么我想要的。

I looked at a few other questions before posting this one. Nothing else does quite what I want.

我的目标是创建一个三列布局，但从页面顶部的中心垂下一个tout中间列。这个屁股应该与我们的公司标志在页面下方一致，页面的文本在该页下面。

My goal is to create a three column layout but with a "tout" hanging down from the center of the top of the page in the middle column. That tout should align with our corporate logo further down the page, with the text of the page flowing under that.

HTML很简单，容器中有三个div， div为标志，然后是正文副本：

HTML is straightforward, three divs in a container followed by a div for the logo and then the body copy:

    <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基于我认为的简单对齐方式：

The CSS is based on what I thought was simple alignment:

.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 ，它半显示我的两个问题：

I put together a fiddle that semi-demonstrates my two problems:

1. 布局在大尺寸下工作得很好，但是当视口缩小右列和/或想要放在中间时（在浏览器中比在小提琴中更容易看到）。


2. 部分由于问题＃1，有时难以保持tout和标志对齐。

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

Yes, eventually this will use fluid images but for the time being everything is static. Seems like a simple layout...but not!

推荐答案

它是因为中心div有固定宽度，而左右宽度为35％。您可以从toprightdiv中删除宽度，也可以在topcenter类上设置max-width：30％

Its because the center div has fixed width while the left and right have 35% width. You can either remove the width from the "topright" div or set max-width:30% on the "topcenter" class

这篇关于三列CSS布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！