Question

我怎样才能做到这一点？

HTML代码：

<div class="inset">
    <div class="innerWrapper">
        <div class="uncollapse">
        </div>
        <div class="featuredbox">
        <div class="rank"></div>
        <div class="banner"></div>
        <div class="desc"></div>
        <div class="votes"></div>
        </div>
    </div>
</div>

CSS代码：

@charset "utf-8";

.featuredbox {
    background-color: #f8f8f8;
    height: 160px;
    width: 100%;
    border: 1px solid #d5d5d5;
    margin-top: 10px;
    -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8;
    box-shadow: 0px 0px 4px 1px #d8d8d8;
    padding-top: 15px;
    padding-bottom: 10px;
}

.featuredbox .rank {
    color: #8f8f8f;
    width: 10%;
    height: 100%;
}

.featuredbox .banner {
    width: 80%;
    height: 50%;
}

.featuredbox .desc {
    width: 80%;
    height: 50%;
}

.featuredbox .votes {
    width: 10%;
    height: 100%;
}

What it should look like http://puu.sh/49szH.png

如何在不使用固定值的情况下使它们以特定格式对齐？

谢谢！

它要求我提供更多详细信息，但我没有更多信息要提供:(

Answer 1

稍微更改了HTML代码。创建了三个主要的div（左，middile，有两个孩子和右）

HTML CODE：

<div class="inset">
    <div class="innerWrapper">
        <div class="uncollapse">
        </div>
        <div class="featuredbox">
        <div class="rank">Rank</div>
         <div class="middileDiv">
        <div class="banner">Banner</div>
        <div class="desc">Desc</div>
             </div>
        <div class="votes">Votes</div>
        </div>
    </div>
</div>

CSS代码：

@charset "utf-8";

.featuredbox {
    background-color: #f8f8f8;
    height: 160px;
    width: 100%;
    border: 1px solid #d5d5d5;
    -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8;
    box-shadow: 0px 0px 4px 1px #d8d8d8;
}

.featuredbox .rank {
    color: #8f8f8f;
    width: 10%;
    height: 100%;
    float:left;
}

.featuredbox .banner {
    width: 80%;
    height: 50%;
}

.featuredbox .desc {
    width: 80%;
    height: 50%;
}

.featuredbox .votes {
    width: 10%;
    height: 100%;
    float:left;
}

.middileDiv {
    color: #8f8f8f;
    width: 80%;
    height: 100%;
    float:left;
}

<强>样本：

http://jsfiddle.net/RvAwB/1/

Answer 2

将此CSS用于html

.featuredbox {
    background-color: #f8f8f8;
    height: 160px;
    width: 100%;
    border: 1px solid #d5d5d5;
    margin-top: 10px;
    -webkit-box-shadow: 0px 0px 4px 1px #d8d8d8;
    box-shadow: 0px 0px 4px 1px #d8d8d8;
    padding-top: 15px;
    padding-bottom: 10px;
}
.featuredbox div{
    float:left;
}
.featuredbox .rank {
    color: #8f8f8f;
    width: 10%;
    height: 100%;
}

.featuredbox .banner {
    width: 80%;
    height: 50%;
}

.featuredbox .desc {
    width: 80%;
    height: 50%;
}

.featuredbox .votes {
    width: 10%;
    height: 100%;
    top:-50%;
    position:relative;
}

Answer 3

嗯，你在这里看到一些问题。

首先，我会删除高度：160px规则。

接下来，您需要意识到，通过在特色框中添加边框，您将在框的宽度上添加2px。因此，除非你在CSS中使用box-sizing：border-box，否则你就会认为特色框是100％宽加2px。

然后，您需要浮动：将特色框内的每个框留下。再次，从这些框中删除高度。

你会发现，通过向填充了内容的盒子添加高度，你不知道它将占用多少空间，如果内容太长，你可能会将内容从底部切掉。移除高度将允许盒子在高度上增长以响应它们包含的内容。

最后，您需要清除特色框上的浮动。有几种方法可以做到这一点，但最新的方法是：

http://nicolasgallagher.com/micro-clearfix-hack/

此外，您应该阅读更多关于如何使用浮动来定位框的信息，因为现在（直到flexbox准备好使用），这是最好的方法。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

将4个div并排对齐父div中的百分比尺寸

3 个答案: