个人中心
gpt4 book ai didi

html - 将图像堆叠在段落栏的顶部

转载 作者：行者123 更新时间：2023-11-28 02:50:24 25 4
gpt4 key购买 nike

我正在尝试使用 html 和 css 来获得 3 列布局，其中我有一张图片，然后在其下方有段落文本。 here is an image of how my columns look now. My second image is stuck in the first column and they are not stacking properly.

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/

25 4 0
文章推荐： javascript - 事件 'Window load' 在带有原型(prototype)的 Opera 中不起作用
文章推荐： html - 粘性页脚在横向方向中断
文章推荐： javascript - "fadeTo"当我滚动图像太快时似乎有一个错误
文章推荐： html - 删除 native css 网格中的行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com