Question

这看起来很简单，但我似乎因某种原因而失败了。所以我有3个图像，每个图像上面都有一个链接。我希望它们显示为内联，我不能使用表格，所以我尝试了div，但它们一个接一个地显示而不是内联。注意：我的页面宽度是1000px

   <!-- First Div with link and image-->
    <div style="float:left;width:33%">
       <a href="/bartop">BarTop Epoxy</a>
       <img style="margin: 15px;"src="image1" width="300" height="315">
    </div>
    <!-- Second Div with link and image--> 
   <div style="float:left;width:33%">
       <a href="/counter top"> Countertop</a>
       <img style="margin: 15px;" src="image2" width="300" height="315">
    </div>
     <!--third Div with link and image-->
    <div style="float:left;width:33%">
       <a href="/flooring">Flooring</a>
       <img style="margin: 15px;" src="image3" width="300" height="315">
    </div>

Answer 1

您需要检查两件事：

DIV没有清除 - 他们应该clear:none声明或继承。
容器中有足够的空间容纳所有这些物品。您的浮动包含300像素宽的元素和额外的30像素边距。你的容器宽990px吗？甚至660px宽？如果没有足够的空间，浮动将会撞到前一个浮动的下方。

Answer 2

默认情况下，divs具有display: block;属性，这意味着它们不会出现在同一行。

您可以通过显示float来解决此问题，就像您已经完成的那样，但您还应添加样式clear: none;以确保浮动元素可以并排。< / p>

或者，您可以使用display: inline-block;，这可能更适合您尝试的操作，here's a jsfiddle可以使用此选项。

如何让这些链接和图像显示为内嵌

2 个答案: