三欄CSS布局

Question

我在發布這個問題之前先看了幾個其他問題。 沒有其他事情能做到我想要的。

我的目標是創建一個三列布局，但在中間列的頁面頂部中心懸掛一個“tout”。 該粉絲應與頁面下方的公司徽標保持一致，頁面文本在此下方流動。

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;
}

我把一個小提琴放在一起，半顯示我的兩個問題：

1. 布局在大尺寸下工作得很好，但是當視口變窄時，右列會下降和/或想要折疊在中間（在瀏覽器中比在小提琴中更容易看到）。
2. 部分原因是問題＃1，有時很難保持兜售和徽標對齊。

是的，最終這將使用流體圖像，但暫時一切都是靜態的。 看起來像一個簡單的布局......但不是！

Answer 1

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

在左右浮動div：

width: calc(50% - 128px);

右側和左側div將共享剩余空間，減去中心的設定寬度（除以2）

在徽標上：

.logo { clear: left; }

並折疊邊框：

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

我還添加了一個'clearfix'類，對於只運行浮動元素的容器來說這很好。

Answer 2

因為中心div有固定寬度，而左邊和右邊有35％寬度。 您可以從“topright”div中刪除寬度，也可以在“topcenter”類中設置max-width：30％