浮动：<img> 的左侧正在使 <p> 向右推答案

【问题标题】：float: left of <img> is making <p> push to the right浮动：<img> 的左侧正在使 <p> 向右推
【发布时间】：2018-06-20 05:19:49
【问题描述】：

所以请原谅我，我对 CSS 很陌生，这是我的第一个真正的项目，我遇到了一些问题，p 被我的第二个 img 的 float:left 元素略微偏离中心.

这是我的 HTML

<div>
        <img id="fishnchips" src="image1.jpeg" alt="Fish n Chips">
        <img id="chicken" src="Friedchickenredbasket.jpeg" alt="Chicken Basket">
</div>

<!--End of images-->

<div class="header-p">
    <p>Coming Soon!</p>
</div>

    </header>
    <p><div id="address">123 Main St.</div></p>

我尝试将两个图像自己包装在一个 div 中，但没有成功。我尝试将img 放在.header-p 中。那也没用。

评论部分是我尝试过的另一个修复，但也没有奏效。这是我能够让顶部图像#fishnchips 位于左上角但在左边距有轻微填充的唯一方法，而它下方的图像#chicken 略低于顶部图像，也在左侧。我想要的是使段落居中，而不是让float:left 将其稍微偏离中心。

当我测试它时，如果我删除float:left，“即将推出！”并且地址都回到了正确的位置。但是我还没有找到float:left 的替代品，它可以使图像仅使用 css 保持在屏幕的左侧。

这是我的 CSS：

#fishnchips {
    position: fixed;
    top: 25px;
    left: 25px;
    right: 10px;
    height: 20%;
    float: left;
    margin-left: 0px;
}

#chicken {
/*  position: fixed;
    top: 25px;
    left: px;
    right: 10px;
    height: 40%;
    float: left;
    margin-left: 0px;*/

    margin-top: 40px;
    height: 10%;
    width: 20%;
    right: 0;
    float: left;
    clear: both;
    display: inline-block;
}
.header-p {
    font-family: 'Permanent Marker', cursive;
    font-size: 50px;
    text-align: center;
    padding-top: .01 em;

}
#address {
    color: #410101;
    font-weight: 200;
    font-size: 1.5em;
}

【问题讨论】：

标签： css image css-float

【解决方案1】：

将overflow: auto 添加到第一个 DIV 以使其围绕其浮动内容（即浮动图像）扩展。

所以在你的特定代码中是

div:first-of-type { overflow: auto; }

但是，如果可能，您应该向 DIV 添加一个类以避免过于通用的选择器，并在上述 CSS 规则的选择器中使用该类：

<div class="x1">
  <img ...
[...]

作为 CSS

div.x1 { overflow: auto; }

【讨论】：

【解决方案2】：

老实说，如果没有图像或适当的 html 标记，我可能会偏离目标，但这可能会满足您的需求。删除浮动和位置：固定。见jsfiddle

position:absolute;

【讨论】：

I may be off target 如果您不确定一些事情，您可以考虑发表评论以获得更多信息而不是回答;)
你说得对，但是 cmets 需要 50 声望，而我没有 50。