Question

我需要顶栏放置在它的位置，侧边栏位于右侧，然后是块填充侧边栏的左侧，然后当侧边栏不再存在时它可以继续向右侧（因此块）。

期望的样子： Desired look

CSS：

html, body {
    height: 100%;
    margin: 0;
}

#contents-h {
width: 800px;
    overflow: hidden;
    padding: 20px;
    background-color: #c1c1c1;
    height: 100%;
}

.advertstop{
    width: 800px;
    height: 100px;
    margin-bottom: 20px;
    text-align: center;
    background-color: red;
}

.advertside{
    top: 0;
    right: 0;
    background-color: #000;
    width: 160px;
    height: 300px;
    margin-bottom: 20px;
    text-align: center;
}

.archiveentry{
    width: 168px;
    display: inline-block;
    padding-bottom: 20px;
    height: 100px;
    background-color: green;
}

HTML：

<div id="contents-h">
    <div class="advertstop">dsf</div>
    <div class="advertside"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
    <div class="archiveentry"></div>
<div class="archiveentry"></div>

Answer 1

CSS

.advertside{ float:right; }

小提琴：http://jsfiddle.net/Varinder/ZQQ6s/26/

干杯

Answer 2

是否可以选择将内容分开一点？

你可以浮动：就在广告上。但如果你把事情分开，你会有更多的自由。它看起来也很整洁。

以下是一个示例： http://jsfiddle.net/Z75Nq/

<div id="container">

<div id="top"></div>

<div id="left">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<div id="right"></div>

<div id="bottom">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

</div>

#container {width: 510px;}
#container div {float: left; display: block;}
#top {width: 510px; height: 70px; background: red;}

#left {width: 306px; height: 150px;}
.box {width: 100px; height: 70px; margin: 2px 2px 0 0; background: green; }

#right {width: 204px; height: 214px; margin-top: 2px; background: black;}

#bottom {width: 510px;}

布局，顶部栏和侧边栏位置

2 个答案: