Question

我现在已经苦苦挣扎了4个多小时，我无法弄清楚这一点。通常当我设计一个网站时，我总是把它放在中心位置，这样我就不会遇到问题，因为div会突破布局。

问题1

我左侧有一个侧边栏，后面是内容块，然后是右侧的侧边栏。每个侧边栏应该是180px宽，内容块应该填充这两个侧边栏之间的空白区域。

我现在甚至不能让它们漂浮在彼此旁边，我之前可以这样做，但我真的很疯狂。

即使我确实让它们在彼此旁边漂浮，当我放大页面时，内容块会破坏布局并跌落到左侧边栏下方，这是非常烦人的我之前从未遇到过这个问题。

第2期

标题处的div块应该自动调整两个徽标之间的大小，类似于我对content_wrapper所需的内容，我该怎么做？

有人能帮助我吗？

由于

HTML

<div id="header">
    <div id="left_logo" class="logo"></div> <!-- Logo on the Left -->
    <div id="block">This is a block</div> <!-- Div block inbetween the two logos -->
    <div id="right_logo" class="logo"></div> <!-- Logo on the Right -->
</div>
<div id="content_wrapper">
    <div id="left_sidebar" class="sidebar">Left Sidebar</div>
    <div id="middle_content">Middle Content</div>
    <div id="right_sidebar" class="sidebar">Right Sidebar</div>
</div>

CSS

html,body {
    height:100%;
}

body {
    background-image: url('../bg.jpg');
}

#header {
    width: 100%;
    border: solid 1px;
    overflow: hidden;
}

.logo {
    width: 180px;
    height: 180px;
    background-image: url('../avatar.jpg');
    border: solid 1px;
}

#block {
    border: solid 1px;
    float: left;
}

#left_logo {
    float: left;
}

#right_logo {
    float: right;
}

#content_wrapper {
    width: 100%;
}

.sidebar {
    width: 180px; 
    float: left;
}

#middle_content {
    min-height: 500px; 
    width: 100%; 
    float: left;
}

Answer 1

有几点需要注意

在#right_sidebar

#middle_content

#right_sidebar必须漂浮而不是左转
#middle_content一定不能浮动，也不能有width: 100%
如果您希望#middle_content位于自己的列中，即不在左侧和右侧边栏下方浮动，请添加margin-left和margin-right

同样适用于#header。

请参阅JSFiddle了解其效果。

虽然已经有好几年了，但在http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

上有一个很好的CSS基本布局方案概述

CSS DIV打破缩放

1 个答案: