Question

我有一个html文件（ index.html ）和一个css文件（ style.css ），还有jsfiddle：http://jsfiddle.net/RZm5y/2/。

的index.html

<html>
<head>
<title>demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="nav">
        <div class="logo">artistLog</div>
    </div>
<div class="topbar">This is the top search/login bar</div>
<div class="content">
    <div class="card">
        <img class="cover" src="img/cover.png" />
    </div>
    <div class="card">Description</div>
</div>
</body>
</html>

的style.css

html, body {
    background: #343434;
    margin:0px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.nav {
    background: #565656;
    color: #b4b4b4;
    margin-right:0px;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    border-right:7px solid #2b2b2b;
    width: 86px;
}
.nav .logo {
    background:#353535;
    height:60px;
    cursor:pointer;
    border-bottom:1px solid #353535;
}
.topbar {
    background: #1d1d1d;
    border-bottom: 1px solid #8d8d8d;
    height: 60px;
    left: 86px;
    position: absolute;
    right: 0;
    top: 0;
}
.content {
    bottom: 0;
    left: 120px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 62px;
    padding: 50px 25px 25px 20px;
}
.content .card {
    background: #101010;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:10px;
    margin-bottom: 15px;
}
.content .card .cover {
    max-width:250px;
    max-height:140px;
    background: transparent;
    float:left;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

我希望内容中的卡片一个接一个地显示而不是一个在另一个下面，当显示器大到足以显示最少2张卡片时，一个又一个显示一个在另一个下面。

Answer 1

你可以通过float将卡片放到一边来实现这一点。

<强> Example Here

.content .card {
    background: #101010;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:10px;
    margin-bottom: 15px;
    float: left; /* <-- Added declaration */
}

由于您已将overflow: auto;添加到.content元素，因此浮动已被清除。但是，您可能需要考虑此主题：

What does the CSS rule clear: both do?

两个元素如何一个接一个地排列它们

1 个答案: