Question

https://jsfiddle.net/calebp/ksnmggL5/light/

我正在努力制作一个网页。在链接的示例中，我将图像准确地放在我想要的位置（较大的图像右对齐，横幅对齐，但在左侧）。我遇到的问题是我想要横幅图像下面的段落。我怎样才能让它完全低于它，而不是随机的'the'在远处漂浮？

<div style="width: 920px;">
<div style="clear: both; text-align: left;">
<a href="largeimage.png"><img border="0" src="largeimage.png"  style="float: right; margin-bottom: 1em; margin-left: .75em;"/></a>
<img border="0" src="banner.png" style="clear: left; float: right; margin-bottom: 1em;"/>
<p>THE PARAGRAPH</p>
</div>
</div>

这是我希望它看起来像，但没有固定的宽度： https://jsfiddle.net/calebp/ksnmggL5/5/

Answer 1

您可以将横幅和段落文本放在一个div中，并使宽度与横幅相同。

Answer 2

你首先需要一些建筑风格。我把你所有的内联样式都放在了课堂上。您需要课程，以便更好地操作HTML。远离内联造型。然后你所要做的就是将你的段落包装在div中并给它以下代码：

    .row{
      float:left;
      width:33%;
    }

    .paragraph {
      float:left;
      width:66%;
      margin-left:5px;
    }

P.S。我建议你学习如何使用像Bootstrap这样的HTML / CSS响应框架。只要您使用正确的课程，它将为您节省所有这些麻烦。

这是您固定的DEMO

Answer 3

使用css布局的基础知识。

首先使用选择器创建块结构。然后将css添加到每个选择器。所以我认为你的HTML结构应该是这样的。

<div id="container">
    <div id="topBanner">
        <img />
        <div id="text">
            <p>THE PARAGRAPH</p>
        </div>
    </div>
    <div id="rightBanner">
        <a href="image.png"><img /></a>
    </div>
</div>

然后添加css样式

#container {
  width:187%;
}
#topBanner{
  width: 50%;
  float:left
}
#rightBanner{
  width: 50%;
  float: right;
}
#text{
  width: 100%;
}

Try this example on jsFidle

在没有文本环绕的情况下将图像浮动到右侧

3 个答案: