0

我已经为此苦苦挣扎了4个多小时，但我无法弄清楚。通常当我设计一个网站时，我总是把它放在中心，所以我从来没有遇到过 div 脱离布局的问题。

问题 1

我在左侧有一个侧边栏，然后是一个内容块，然后是右侧的侧边栏。每个侧边栏应为 180 像素宽，内容块应填充这两个侧边栏之间的空白空间。

现在我什至不能让它们漂浮在彼此旁边，我以前可以这样做，但我真的快疯了。

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

问题 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;
}
4

1 回答 1

0

有几点需要注意

  • 移动#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 基本布局方案概述

于 2013-10-09T11:29:55.410 回答