Question

我正在尝试使用html和css来获得一个3列布局，其中我有一张图片，然后在下面我有段落文本。

HTML ：

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<title>Responsive Design Example by Alex Fogarty</title>


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


<link href="figureCSS/reset.css" rel="stylesheet">

<link href="figureCSS/phone-default.css" rel="stylesheet">

<link href="figureCSS/tablet.css" rel="stylesheet">

<link href="figureCSS/desktop.css" rel="stylesheet">

<link href="about.css" rel="stylesheet"/>
<link href="contact.css" rel="stylesheet"/>
<link href="msum.css" rel="stylesheet"/>


</head>
<body>
<header>

 <a href="about.html">About</a> 
<br>

Contact

<br>

MSUM

</header>

<div id="content">


<figure class="stayssame">
 <video controls loop poster="placeholder.png" autoplay>
  <source src="video.mp4" type="video/mp4">
 <!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
</figure>
<object type="image/svg+xml" data="newsvg.svg" ></object>

<div class="video-txt" ></div>


<section class="clearfix container" >
<h1>Kittens</h1>
<div>
<h2> Kitten One</h2>
<img class="img" src="kit1.jpg" alt="kitten one"/>
<p class="column-left">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<h2>Kitten Two</h2>
<img class="img" src="kit2.jpg" alt="kitten two"/>
    <p class="column-center">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

<br>
<h2> Kitten Three</h2> 
     <br>
     <img class="img" src="kit33.jpg" alt="kitten three"/>
    <br>
        <p class="column-right">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

</div>
</section>



</div><!-- end of the row-->




</body></html>

CSS ：

@media only screen and (min-width: 961px) {

header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color:#FC0509;
}

/*-----CONTENT -----*/
figure.adjustable {
    width: 29%; 
}


.column-left{ float: left; width: 33%;

 }
.column-right{ float: right; width: 33%; 

}
.column-center{ display: inline-block; width: 33%;

 }

.container{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
 column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 33%; /* Chrome, Safari, Opera */
-moz-column-rule-width: 33%; /* Firefox */
column-rule-width: 33%;


}

h1{

 -webkit-column-span: all; /* Chrome, Safari, Opera */
  column-span: all;
}

.clearfix:after {
content:" ";
display:block;
clear:both;
}
.img{

 position:relative;

 height: 200px; width: 300px; overflow: hidden

}



}

对此的任何帮助将非常感谢！我是新手，所以不要过于严厉地判断。

Answer 1

看起来你所做的是将段落与float对齐，而不是图像。更好的方法是生成三列，每列包含一个段落和一个图像。像这样。

<强> HTML

<div class='cols'>
    <img src='yourimage.jpg' alt='Your Image'>
    <p>Your Text</p>
</div>
<div class='cols'>
    <img src='yourimage.jpg' alt='Your Image'>
    <p>Your Text</p>
</div>
<div class='cols'>
    <img src='yourimage.jpg' alt='Your Image'>
    <p>Your Text</p>
</div>
<div class='cl'></div>

<强> CSS

.cols { float:left; width:33%; }
.cl   { clear:both; }

这样做的是生产三个容器，每个容器一个。 “cl”div可以有效地结束这一行。

Answer 2

解决问题的最佳方法是创建三个单独的div，每个div都有width: 33%和float: left;，而不是使用column-count的部分。您可能更喜欢宽度为30％，每列填充1％。请注意，提供图片max-width: 100%非常重要，以确保它们永远不会比列本身更宽！

我已经创建了一个示例来说明这一点：https://jsfiddle.net/105txexh/1/

我还整理了您的代码，并删除了不再需要的所有代码。

希望这有帮助！

在段落列顶部堆叠图像

2 个答案: