图像未正确浮动答案

【问题标题】：Image not properly floating图像未正确浮动
【发布时间】：2021-07-11 04:10:48
【问题描述】：

我正在学习 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>

有谁知道如何进行这项工作？提前致谢！

【问题讨论】：

标签： html css image css-float

【解决方案1】：

我建议你学习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>

【讨论】：

【解决方案2】：

使用此更新后的代码一次：

.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>

【讨论】：

【解决方案3】：

为newest div 和newIcon 图像添加float 属性。同时将边距 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;
}

JSFIDDLE

【讨论】：

这没有改变。该网站看起来完全一样，只是 div 现在位于左侧而不是居中。
您只询问并排的图像和文本。其他网页代码也没有提供......
提供最新的div上面的代码，所以可以定义最新的位置....