0

我试图在单独的行上显示我的帖子，但它们不断溢出容器的边界。我尝试将父级的宽度设置为最小，但它仍然溢出。这是我的博客网站的链接

www.darealistmedia.com

在那里你可以看到我的问题。这是我的 CSS 文件。“主要”是我试图将它们保留在其中的容器。

* {
    margin:0px;
    padding:0px;
}
h1 {
    font:bold 20px Tahoma;
}
h2 {
    font:bold 14px Tahoma;
}
header, section, footer, aside, nav, article, hgroup {
    display:block;
}
body {
    width:100%;
    display:-webkit-box;
    -webkit-box-pack:center;
}
.holder {
    max-width:1000px;
    margin:15px 0;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
}
header {
    background:yellow;
    border:3px solid black;
    padding:auto;
    /*20*/
}
.navigation {
    border:3px solid black;
    background:blue;
    color:white;
    padding:10px;
    text-align:center;
}
.navigation div {
    display:inline-block;
}
.new_div {
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
.main {
    text-align:center;
    border:4px solid orange;
    -webkit-box-flex:1;
    margin:20px;
    padding:20px;
}
.right-sidebar {
    border:1px solid red;
    width:220px;
    margin:20px;
    margin: background:#66cccc;
}
footer {
    text-align:center;
    padding:20px;
    border-top:2px solic green;
}
/*Post Styles*/
.postSection {
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    width:800px;
    overflow:scroll;
}
.postWrapper {
    border:2px solid red;
    padding:5px;
    margin:11px;
    width:270px;
    height:270px;
}
.postTitle {
    background-color:#303030;
    font-size:28px;
    font-weight:bold;
    font-family:Trajan Pro;
    color:white;
    padding:5px;
}
.postContent {
    background:#c7c7c7;
}
.postTabs {
    text-align:center;
    background-color:#202020;
    float:left;
    color:white;
    padding:5px;
}
.day {
    font-size:30px;
}
.linkList {
    float:right;
}

我究竟做错了什么？

4

1 回答 1

0

这完全符合预期。你告诉 postWrapper 有 270px 的高度，它确实如此，即使内容更大。你可以overflow: hidden;用来隐藏额外的内容，但这会在句子中间切断你的内容。可能更好地替换height: 270px;为min-height: 270px;：

.postWrapper {
    border:2px solid red;
    padding:5px;
    margin:11px;
    width:270px;
    min-height:270px;
}
于 2013-05-05T08:46:07.217 回答