gpt4 book ai didi

Css - 图放置

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

大家好,我是 HTML5/CSS 的新手,所以我需要一些帮助。

问题是图像不会进入框内。
它的当前位置在框的左下角。
我想将它放在框的左侧,将 h2 和 p 放在图像的右侧我只是对我所缺少的东西感到困惑

此外,如果我为每个 html 元素创建一个 id 可以吗?看起来元素太多了,这在网页设计中是不是不受欢迎?如果是这样,正确的做法是什么?

非常感谢

#featPost {
padding:70px 0px 0px 51.2px;
/* background-color: orange;*/
}

#featPost section {
width: 750px;
height: 261px;
border-style: double;
border-width: 4px;
border-color: black;

}

#featPost figure {
position: relative;
padding-right:20px;
float:left;

}

#featPost h1 {
font-family: "Calibri", Helvetica, sans-serif;
}

#featPost h2 {
padding: 50px 0px 10px 41.5px;
font-size: 30px;
text-align: center;
font-family: "Calibri", Helvetica, sans-serif;

}


#featPost section{
border-style: double;
border-width: 4px;
border-color: black;

}

#featPost p {
padding-bottom: 150px;
font-size: 20px;
}
<aside id="featPost"><article>

<h1> Featured Post </h1>

<section>
<h2> Essay as Easy as 1,2,3 </h2>
<figure>
<img src="images/example.png" width="250" height="250" alt="image of an egg">
</figure>
<p> What? There are rules in writing an essay?? <a href="writing_art1.html" title="Read more">Read more</a></p>
</section>
</article></aside>

最佳答案

我建议将图像向左浮动。我稍微更新了你的代码:

HTML:

<aside id="featPost">
<article>
<h1> Featured Post </h1>
<section>
<figure>
<img src="http://placehold.it/250x250" width="250" height="250" alt="image of an egg" />
</figure>
<h2> Essay as Easy as 1,2,3 </h2>

<p>What? There are rules in writing an essay?? <a href="writing_art1.html" title="Read more">Read more</a></p>
</section>
</article>
</aside>

CSS:

#featPost {
padding:70px 0px 0px 51.2px;
/* background-color: orange;*/
}
#featPost section {
width: 750px;
overflow: auto;
border: 4px double black;
}
#featPost figure {
float:left;
}
#featPost h1 {
font-family:"Calibri", Helvetica, sans-serif;
}
#featPost h2 {
margin-top: 50px;
font-size: 30px;
text-align: center;
font-family:"Calibri", Helvetica, sans-serif;
}

#featPost p {
font-size: 20px;
}

DEMO

关于Css - 图放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30027020/

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