（HTML / CSS）不能让块与下面的文本一个接一个地排列

时间：2019-01-19 19:43:17

标签： html css

我是html和CSS的初学者，因此对任何愚蠢的错误表示歉意。我一直在为音乐博客进行设计，我想在“评论”部分的右边列出一张专辑封面，并在其下方逐行排列文本。 Better explained by the wireframe i designed for it

但是，香港专业教育学院一直在摆弄它，我似乎无法正确地做到这一点，我相信问题出在我的CSS上。现在看起来像this

html如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    @import url("yeyeyyey.css");
    </style>
</head>

<body>
    <section class="reviewsection">
        <div class="reviews"><a href="reviews.html">reviews.</a></div>
        <ul class="reviewsimg">
            <li class="albumart"><a class="album" href="#"><img class="albumartspace" src="Sample-Logo-square-300x300.png" alt="Warehouse Project"></a></li>
                <ul class="albumdetails">
                    <li class="artistname">Artist Name</li>
                    <li class="albumname"><a class="album">Album Name</a></li>
                    <ul class="edited">
                        <li class="author">Author /</li>
                        <li class="genre"> Genre </li>
                        <li class="lastedited">/ Last Edited</li>
                    </ul>
                    <li class="albumsummary"><p>[summary of album]</p></li>
                </ul>
        </ul>
    </section>

    <section class="releasesection">
      <div class="releasecalendar"><a href="releasecalendar.html">release calendar.</a></div>
        <ul class="calendarimg">
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="Sample-Logo-square-300x300.png" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
        </ul>
    </section>
</body>
</html>

CSS如下：

@charset "utf-8";
/* REVIEWS */

body {
    font-family: courier;
}

.reviewsection {
    float: left;
    width:35%;
    margin-right: 20px;
}

.reviews {display:inline-block;
             padding-top: 10px}

.reviews a {
    color: black; 
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
    border: 1px solid black;
    padding: 0px 5px;
    background-color: white;
}

.reviews a:hover {
    background-color: black; 
    color:white;
    border: 1px solid white;
}

.reviewsimg {
    display:flex;
    padding:0px;
    background-color:white;
    border: 1px solid black;
    width:100%;
    height: 100%;
    max-height: 350px;
    margin-top: -13px;
    list-style: none;
}

.albumartspace {
    width:100%;
    max-width:250px;
    height:auto;
}

.albumart {
    margin-top:22px;
    margin-left: 10px;
    margin-bottom: 5px;
    position: relative;
}

.albumart img:hover {
    opacity: .8;
}

.albumdetails {
    padding-top: 20px;
    padding-left: 20px;
    list-style: none;
}

.artistname {
    font-size: 25px;
    font-weight: bold;
}

.albumname {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.edited {
    padding-left:0px;
    list-style-type: none;
    font-style: italic;
}

.author {
    display: inline;
}

.genre {
    display: inline;
    color: red;
}

.lastedited {
    display: inline;
    color: grey;
}

/* RELEASE CALENDAR */

.releasesection {
    float:left;
    width:42%;
    height:auto;
}

.releasecalendar {
    display:block;
    padding-top: 10px;
    float: left;
}

.releasecalendar a {
    color: white; 
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
    border: 1px solid white;
    padding: 0px 5px;
    background-color: black;
}

.releasecalendar a:hover {
    background-color: white; 
    color:black;
    border: 1px solid black;
}

.calendarimg {
    float:left;
    width:100%;
    height:auto;
    margin-left: 0px;
}

.artandtext {
    display:inline;
    width:20%;
    height:auto;
    float:left;
    margin: 0px;
    list-style: none;
}

.calendarart {
    width:100%;
    height:100%;
    list-style-image: none;
    margin-right: 0px;
}

.calendarartspace {
    width:100%;
    height:100%;
    margin-right: 0px;
}

2 个答案:

答案 0 :(得分：2)

您在浪费自己的时间，试图编写CSS来手动将所有这些内容隔开。

看看Bootstrap的grid documentation，在其中进行网格布局变得如此简单：

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

开箱即用，因此可以自动在较小的设备（例如手机或平板电脑）上正确堆叠内容。

开始使用此方法非常简单，只需在您自己页面的<head>部分中包含CDN托管的Bootstrap.css。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap-grid.css" integrity="sha256-HRLYo6FLXIvFal6HYY2xyKFHJdB/vl4JQDg4fVhGujA=" crossorigin="anonymous" />

如果要添加一些更高级的引导程序功能，以后可能需要一些JS插件。

答案 1 :(得分：0)

我不确定您具体要针对的是什么，但是您遇到的一个基本问题是您使用了很多ul和li元素，这些元素具有默认的边距和填充。因此，如果您只是这样重置... 

ul {
  margin: 0;
  padding: 0;
}

...这是向前迈出的一大步。下一步是微调宽度等。

@charset "utf-8";
/* REVIEWS */

body {
    font-family: courier;
}
* {
  box-sizing: border-box;
}
.reviewsection {
    float: left;
    width:35%;
    margin-right: 20px;
}

.reviews {display:inline-block;
             padding-top: 10px}

.reviews a {
    color: black; 
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
    border: 1px solid black;
    padding: 0px 5px;
    background-color: white;
}

.reviews a:hover {
    background-color: black; 
    color:white;
    border: 1px solid white;
}

.reviewsimg {
    display:flex;
    padding:0px;
    background-color:white;
    border: 1px solid black;
    width:100%;
    height: 100%;
    max-height: 350px;
    margin-top: -13px;
    list-style: none;
}

.albumartspace {
    width:100%;
    max-width:250px;
    height:auto;
}

.albumart {
    margin-top:22px;
    margin-left: 10px;
    margin-bottom: 5px;
    position: relative;
}

.albumart img:hover {
    opacity: .8;
}

.albumdetails {
    padding-top: 20px;
    padding-left: 20px;
    list-style: none;
}

.artistname {
    font-size: 25px;
    font-weight: bold;
}

.albumname {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.edited {
    padding-left:0px;
    list-style-type: none;
    font-style: italic;
}

.author {
    display: inline;
}

.genre {
    display: inline;
    color: red;
}

.lastedited {
    display: inline;
    color: grey;
}

/* RELEASE CALENDAR */

.releasesection {
display: inline-block;    width:60%;
    height:auto;
}

.releasecalendar {
    display:block;
    padding-top: 10px;
    float: left;
}

.releasecalendar a {
    color: white; 
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
    margin-top: 20px;
    border: 1px solid white;
    padding: 0px 5px;
    background-color: black;
}

.releasecalendar a:hover {
    background-color: white; 
    color:black;
    border: 1px solid black;
}

.calendarimg {
    float:left;
    width:100%;
    height:auto;
    margin-left: 0px;
}

.artandtext {
    display:inline-block;
    width:19%;
    height:auto;
    margin: 0px;
    list-style: none;
}

.calendarart {
    width:100%;
    height:100%;
    list-style-image: none;
    margin-right: 0px;
}

.calendarartspace {
    width:100%;
    height:100%;
    margin-right: 0px;
}
ul {
  margin: 0;
  padding: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    @import url("yeyeyyey.css");
    </style>
</head>

<body>
    <section class="reviewsection">
        <div class="reviews"><a href="reviews.html">reviews.</a></div>
        <ul class="reviewsimg">
            <li class="albumart"><a class="album" href="#"><img class="albumartspace" src="https://placehold.it/300x300/ccc" alt="Warehouse Project"></a></li>
                <ul class="albumdetails">
                    <li class="artistname">Artist Name</li>
                    <li class="albumname"><a class="album">Album Name</a></li>
                    <ul class="edited">
                        <li class="author">Author /</li>
                        <li class="genre"> Genre </li>
                        <li class="lastedited">/ Last Edited</li>
                    </ul>
                    <li class="albumsummary"><p>[summary of album]</p></li>
                </ul>
        </ul>
    </section>

    <section class="releasesection">
      <div class="releasecalendar"><a href="releasecalendar.html">release calendar.</a></div>
        <ul class="calendarimg">
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
            <ul class="artandtext">
                <li class="calendarart"><a class="calendaralbum" href="#"><img class="calendarartspace" src="https://placehold.it/300x300/ccc" alt="Album"></a></li>
                <li class="releasedate">Release Date</li>
                <li class="name">Artist Name</li>
                <li class="albumtitle">Album Title</li>
            </ul>
        </ul>
    </section>
</body>
</html>

相关问题
最新问题