我正在尝试使用 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
}
}
如有任何帮助，我们将不胜感激!我是新手，所以不要太苛刻地判断。
最佳答案
解决该问题的最佳方法是创建三个单独的 div，每个都有一个 width: 33% 和 float: left; 而不是使用一个部分使用 column-count。您可能更喜欢 30% 的宽度，每列填充 1%。请注意，为图像提供 max-width: 100% 非常重要，以确保它们永远不会变得比列本身更宽!
我在这里创建了一个示例来说明这一点:https://jsfiddle.net/105txexh/1/
我还整理了您的代码，并删除了所有不再需要的代码。
希望这对您有所帮助!
关于html - 将图像堆叠在段落栏的顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39564834/