gpt4 book ai didi

html - 填充不适用于我的文本

转载 作者:太空宇宙 更新时间:2023-11-04 12:47:52 26 4
gpt4 key购买 nike

html:

<div id="main">
<div style="position: absolute; height: 150px; width: 400px; left: 290px;"><img src="HEAD-IMAGE.jpg" /></div>
<div style="position: absolute; height: 300px; width: 233px; top: 180px;"><img src="LEFT-IMAGE.jpg" />(below head)</div>
<div style="position: absolute; top: 200px; left: 270px;">TEXT (next to left image)</div>
</div>

CSS:

div#main{
position: absolute;
top: 141px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -490px;
text-align: justify;
background-color: yellow;
}

#main 中的填充适用于我的图像,但不适用于我的文本(右侧和底部填充)。

最佳答案

为什么会这样?

在您的示例中,只有文本 div 具有 topleft 属性。包含图像的两个 div 仅包含以下属性之一:

  • header div 有 left: 290px;,因此它的 y 轴位置移动了顶部内边距。

  • 左边的 div 有 top: 180px; 所以它的 x 轴位置移动了左边的 padding。

  • 文本 div 有 top: 200px; left: 270px; 所以它的 x 轴和 y 轴不受填充的影响。

为了说明这一点,在本例中,文本 div 已删除其 left 属性。它现在受其容器的左填充影响:

(“显示代码片段”并运行它)

#main {
position: absolute;
top: 141px;
left: 50%;
height: 100%;
width: 960px;
padding: 50px;
margin-left: -290px;
text-align: justify;
background-color: yellow;
}
.header {
position: absolute;
height: 150px;
width: 400px;
left: 290px;
background: #F00;
}
.left {
position: absolute;
height: 300px;
width: 233px;
top: 180px;
background: #F00;
}
.text {
position: absolute;
top: 200px;
background: #F00;
}
<div id="main">
<div class="header">
<img src="http://www.placehold.it/200" />
</div>
<div class="left">
<img src="http://www.placehold.it/200" />
</div>
<div class="text">You can't handle the truth, soldier!</div>
</div>

position: absolute 是布局元素的最佳方式吗?

Depends... position: absolute 从文档的正常流中移除元素。也就是说,每个元素基本上对另一个元素是不可见的。如果您希望创建一个可以根据用户浏览器的高度/宽度调整大小的灵活布局,这尤其成问题。

你能告诉我另一种布局 HTML 元素的方法吗?

当然!有许多无需诉诸position: absolute 来布局页面的方法。下面是一个使用 display:flex 的基本示例——一种更新的元素布局方式。它还没有享受 100% 的浏览器支持,所以这纯粹是一种技术的例子:)

阅读更多:

flex 例子

注意当示例全屏显示时元素如何调整大小。

* {
margin: 0;
padding: 0;
}
body {
width: 80vw;
max-width: 800px;
margin: 0 auto;
background: #424242;
}
header {
background: #e91e63;
height: 20vh;
}
.wrap {
display: flex;
}
.left {
background: #fce4ec;
flex: 1;
}
.content {
background: #fafafa;
min-height: 70vh;
flex: 2;
}
footer {
height: 10vh;
background: #c51162;
}
<header>
I am header
</header>
<div class="wrap">
<div class="left">
I am sidebar
</div>

<div class="content">
I am content
</div>
</div>
<footer>
I am footer, hear me roar! RWAR!
</footer>

关于html - 填充不适用于我的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26358550/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com