Question

我是HTML5和CSS的初学者。我在浮动中遇到了一个问题：左边。我想在前一个数字的右边显示数字，但它不起作用。我已经尝试过调查一些SO问题，但还没有找到确切的答案。如果你可以提供帮助那就太棒了

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
    rel="stylesheet"
    href="drop.css"
>

</head>
<body>

    <section id="pics">
        <figure
            id="pic1"
            class="pictures"
        >
            <img
                alt="figure1"
                src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
                title="pic1"
            >
        </figure>


        <figure
            id="pic2"
            class="pictures"
        >
            <img
                alt="figure2"
                src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
                title="pic2"
            >
        </figure>
    </section>
</body>

</html>

CSS：

#pics{
    width:200px;
    height:200px;
} 

.pictures{
    float: left;
} 

.pictures img{
    width:100%;
    height:auto;
}

Answer 1

您将200px宽度分配给#pics，但那是您的容器。图像没有机会彼此相邻显示。如果有疑问，浏览器会打破并移动下面的数字，这就是您现在所看到的。

要修复，请将宽度设置为图元素：

.pictures {
  float: left;
  width: 200px;
  height: 200px;
}

Answer 2

您将img宽度设置为100％。尝试将其设置为低于50％的值，并查看其工作原理。

此外，请注意许多浏览器都有default style for the HTML5 figure element。您必须处理额外的填充/边距，以使您的布局按预期工作。

Answer 3

您的问题在于宽度值。您告诉容器#pics是200px宽度。然后，您将图像告知其容器的100％。由于#pic1和#pic2元素没有定义的宽度，因此默认设置为auto。这意味着您的<img>元素占据了容器元素的100％宽度（200px）。

我建议将你的img标签保持100％宽度，然后它们将获取其包含元素的整个宽度。你必须做什么来修复浮动，然后也给.pictures类一个宽度。

此外，<figure>元素以及大多数元素都应用了一些默认样式，例如边距空间。您需要确保除了宽度之外没有边距，填充或边框空间，否则浮动将再次中断。

例如......

http://jsfiddle.net/ECs4g/2/

.pictures{
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}

以下是您需要了解的有关浮动的所有内容的链接：http://css-tricks.com/all-about-floats/

Answer 4

这是因为您将width和height属性设置为仅200px值。

增加该值，您的图像将浮动到左侧。您还需要在此处设置容器大小的一小部分的图像大小。

以下是示例：

.pictures img {
  width: 40%;
}

然后图像将具有容器宽度的40％宽度。因此，诀窍是增加容器的大小并减小图像的大小，然后图像将浮动到容器的左侧大小。

float：在类上没有处理数字标记

4 个答案: