gpt4 book ai didi

html - CSS/HTML 初学者 > 我有一个 div,不希望 html 内容图像将另一个 div 推开!?

转载 作者:行者123 更新时间:2023-11-28 10:48:38 25 4
gpt4 key购买 nike

所以我有一个 div :

.col-4 {
width:300px;
height:400px;
margin-bottom:20px;

}

还有一些文字背景图片:

.head {
width:300px;
height:64px;
background-image: url(images/news_head_bg.png);

}

.newstext {
font-size:16px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-left:10px; padding-top:10px;
}

我希望 col-4 成为主容器,.head 在里面,里面是 .newstext。但我还需要一张图片(html 格式)。这就是 html without图片现在看起来:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="headlineprop.css">

</head>

<body>

<div class="row_1" >
<div class="col col-4">
<div class="head">div class="newstext"> 3D Printer for 300 USD </div></div></div>

</body>
</html>

这正是我想要的 - 这个:

http://i.stack.imgur.com/RL5u7.png

问题在这里

粉色区域需要是来自HTML的图片。所以如果我这样做:

<body>

<div class="row_1" >
<div class="col col-4"><img src="images/content_ohbg.jpg">
<div class="head"><div class="newstext"> 3D Printer for 300 USD </div></div></div>

</body>

看起来像这样:

http://i.stack.imgur.com/4HMXo.png

那么我如何让图像成为 html 中的内容,而不是将其他框推开?

最佳答案

您需要查看相对和绝对定位,以便将 .head 放在图像的顶部。

另外,Sunrays 提供的背景图像建议也不错,但您可能会对背景图像值使用内联样式(而不是将其放入样式表中),以便可以动态生成内容。

关于html - CSS/HTML 初学者 > 我有一个 div,不希望 html 内容图像将另一个 div 推开!?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24240423/

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