显示在边界外的图像

Question

我目前的边框是这样的：
_{（来源：gyazo.com）}

但我希望正文的流动方向是从左到右，而不是从上到下。

在控制这些的 div 上使用 float: left; 时，我得到以下信息：
_{（来源：gyazo.com）}

图像现在完全超出了边界。这是正文的当前代码：

<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 另外，如果有人可以给我一个提示，即使页面调整得太小，如何仍然让文本留在图像的右侧。如果您在 fiddle 中注意到，一旦页面变得太小，文本将移至底部。

Answer 1

将 overflow: hidden; 添加到 class .wrapper

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

Answer 2

你可以使用 overflow:hidden 到 class .wrapper，否则你可以使用 display:inline-block 到 class.courses 而不是使用 float:left

Answer 3

当您在一个元素内浮动所有元素时，该元素将折叠。

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

另一个解决方案如下：

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

这允许包装器的 :after 伪元素清除包装器，而不必担心使用 overflow:hidden;

可能引起的潜在问题

Answer 4

我认为这会对您有所帮助，您需要将所有图像驻留在一个分区中，而不是为每个图像分配新的分区，您也可以通过为 class 更改 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 5

试试这个，

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

Answer 6

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

可以通过三种方式做到这一点：

"hacky" 方式 - 在父 .wrapper

overflow: hidden;

将父 .wrapper 设置为 display: inline-block;
通过向父类.wrapper 添加伪元素来正确清除浮动：

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

Answer 7

add 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>

Answer 8

尝试使用以下 CSS。我认为可能对你有用，正如之前有人提到的那样，但我对 php、javascript 有简要的了解，我只是 Whosebug 的新手。

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

不管有那么多其他的方法，但是不符合堆栈溢出策略，最好不要写完整的代码。

显示在边界外的图像

Images showing up outside of border

html

css