0

我怎样才能做到这一点？

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

它应该是什么样子 http://puu.sh/49szH.png

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

谢谢！

它要求我提供更多细节，但我没有更多可提供的:(

4

3 回答 3

2

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

HTML 代码：

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

代码：

@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/

于 2013-08-24T04:39:26.413 回答
1

只要把这个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;
}
于 2013-08-24T05:20:01.083 回答
0

好吧，您在这里看到了一些问题。

首先，我将删除 height: 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/

于 2013-08-24T04:36:57.160 回答