图像未正确浮动
图像未正确浮动
提问于 2021-04-16 14:20:58
我正在学习html，在编写自己的博客页面时遇到了一些问题。
我正在尝试创建一个小部分，带你到最新的帖子，但我在布局方面遇到了问题。
我希望它让文本和图像清晰地相邻浮动，如下所示：
相反，我将获取图像下面的文本，如下所示：：
我不明白为什么东西不能正常浮动。
下面是相关的html：
.newest {
border: 4px solid #cfcfcf;
border-radius: 10px;
padding: 16px;
width: clamp(45ch, 50%, 75ch);
margin-left: auto;
margin-right: auto;
}
img.newIcon {
float: inline-start;
height: 100px;
width: 100px;
margin: 1px, 1px;
border: #111111;
}<body>
<p>TEST</p>
<div id="newest" class="newest">
<img class="newicon" src="images/icons/making-a-blog.png">
<h2>Making a Blog</h2>
<p>This is an article I wrote about making a blog. It describes my process and experience.</p>
</div>
</html>
有没有人知道怎么做？提前感谢！
回答 3
Stack Overflow用户
发布于 2021-04-16 14:40:43
向newest目录和newIcon图像添加浮动属性。还可以将边距0添加到h2标签。
.newest {
border: 4px solid #cfcfcf;
border-radius: 10px;
padding: 16px;
width: clamp(45ch, 50%, 75ch);
margin-left: auto;
margin-right: auto;
float:left;
}
img.newIcon {
height: 100px;
width: 100px;
margin: 1px 5px; //removed , (comma) in two values
border: #111111;
float:left;
}
h2 {
margin: 0px;
}Stack Overflow用户
发布于 2022-02-02 03:34:51
使用此更新的代码一次：
.outer-box{
border: 4px solid #cfcfcf;
border-radius: 10px;
padding: 16px;
width: clamp(45ch, 50%, 75ch);
margin-left: auto;
margin-right: auto;
float:left;
}
.outer-box img{
height: 100px;
width: 100px;
margin: 1px 5px;
border: #111111;
float:left;
}
<div class="outer-box">
<img src="images/icons/making-a-blog.png">
<h2>Making a Blog</h2>
<p>This is an article I wrote about making a blog. It describes my process and experience.</p>
</div>Stack Overflow用户
发布于 2022-02-02 04:04:53
我建议你学习grid和grid-template，你可以加快速度。
.newest {
border: 4px solid #cfcfcf;
border-radius: 10px;
padding: 16px;
display: grid;
grid-template-columns: 40% 60%;
}
img.newIcon {
float: inline-start;
height: 100px;
width: 100px;
margin: 1px, 1px;
border: #111111;
}
.newest_image{
margin: 0;
padding: 0;
}
img {
width: 180px;
height: 120px;
}<body>
<p>TEST</p>
<div id="newest" class="newest">
<div class="newest-image">
<img class="newicon" src="https://hostingdunyam.com.tr/blog/wp-content/uploads/2021/07/html-nedir.png">
</div>
<div class="newest-info">
<h2>Making a Blog</h2>
<p>This is an article I wrote about making a blog. It describes my process and experience.</p>
</div>
</div>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67120047
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号