CSS - 在不同的行上显示框

Question

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

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