Question

我目前有这样的边框： current http://gyazo.com/03e2f00fbe3125ba2d69a9136e6839d8.png 但我希望身体的流动从左到右而不是从上到下。

在控制这些的div上使用float: left;时，我得到了这个： broken http://gyazo.com/922df1f6586dd3ee7cd49d89fa1f6634.png 图像现在完全脱离边界。这是正文的当前代码：

<div class="courses">
                <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
        </div>
        <div class="courses">
        <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
            </div>

当然是jsfiddle 此外，如果有人可以给我一个提示，即使页面调整得太小，如何仍然将文本保留在图像的右侧。如果您在小提琴中注意到，一旦页面变得太小，文本将移到底部。

Answer 1

出现此问题是因为您没有正确清除float: left - 浮动元素将其置于文档流之外。您需要清除包含元素（因此，如果您浮动.courses，则需要在其父元素上设置clear）。

有三种方法可以做到这一点：

“hacky”方式 - 在父.wrapper

overflow: hidden;

将父.wrapper设置为display: inline-block;
通过向父.wrapper：

.wrapper:after { content: ""; display: table; clear: both; }

Answer 2

将overflow: hidden;添加到课程.wrapper

工作演示http://jsfiddle.net/Ljmyfkbc/2/

Answer 3

尝试使用以下CSS。我认为可能对你有用，因为有些人已经提到它更为错误，但我对php，javascript有一些简要的了解，我只是对stackoverflow的新手。

.wrapper:after {
    content: "";
    display: table;
    clear: both;
}

无论有多少其他方法可以做到这一点，但编写完整的代码并不是更好，因为它不符合堆栈溢出策略。

Answer 4

您可以将overflow:hidden用于课程.wrapper，否则您可以display:inline-block使用.courses代替float:left

Answer 5

当您在元素中浮动所有元素时，该元素将会崩溃。

尝试将overflow:hidden;添加到您的包装器中。这是这个问题的常见解决方案。

另一种解决方案如下：

.wrapper:after {
    content:"";
    display:table;
    clear:both;
}

这允许包装器的：after伪元素清除包装器，而不必担心使用溢出可能引起的潜在问题：隐藏;

Answer 6

我认为这会对你有所帮助，你需要将你所有的图像存放在一个部门中，而不是给每个图像赋予新的划分，你也可以通过改变你的班级的css来做到这一点。像：

<div class="courses">
                <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
        <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
            </div>

的CSS：

.courses{
any style you want for figcaption and figure.

}

Answer 7

试试这个。，

.wrapper{
    background-color: white;
    width: 85%;
    display:inline-block;/*added*/
    border: 2px solid black;
    text-align: center;
}
.courses{
    float:left;
}

Answer 8

添加css

.wrapper{
    background-color: white;
    width: 85%;
    border: 2px solid black;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

HTML

<div class="wrapper">
        <header>
            <h1>Yoko's kitchen</h1>
            <nav>
                <ul>
                    <li>classes</li>
                    <li>catering</li>
                    <li>about</li>
                    <li>contact</li>
                </ul>
            </nav>
        </header>

        <div class="courses">
                <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
        </div>
        <div class="courses">
        <figure>
                    <img src="http://atlanta.eat24hours.com/files/cuisines/v4/chinese.jpg" alt="Asian" height="300px" width="300px" />
                    <figcaption>Bok choi</figcaption>
                </figure>
            </div>

    </div>

图像显示在边界外

8 个答案: