Question

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

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

我做错了什么？

Answer 1

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

.postWrapper {
    border:2px solid red;
    padding:5px;
    margin:11px;
    width:270px;
    min-height:270px;
}

CSS - 在单独的行上显示框

1 个答案: