Question

无论我如何调整屏幕宽度，我都试图安排我的3个div来让它们站在一条线上。尽管我的屏幕宽度是1366px（100％），但我的3个div中有1个站在一个单独的行中，而不是与另一个站在一行中。我读过许多答案，说使用display：inline-block ，但现在我正在尝试使用float来使其工作。很高兴，如果你们可以提供帮助。所有答案都表示赞赏。以下是我的代码：https://jsfiddle.net/brothereye/z53mjtcy/

我的HTML：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="theme.css">
        <title>Module 2 Assignments</title>
    </head>

    <body>
        <h1 id="title">Our Menu</h1>
        <div id="menu col-lg-12">
            <div class="meal col-lg-4">
                <div class="name"><h3>Chicken</h3></div>
                <div class="describe"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p></div>
            </div>

            <div class="meal col-lg-4">
                <div class="name"><h3>Beef</h3></div>
                <div class="describe"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p></div>
            </div>

            <div class="meal col-lg-4">
                <div class="name"><h3>Sushi</h3></div>
                <div class="describe"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.</p></div>
            </div>
        </div>
    </body>
</html>

我的CSS：

body
{
    font-family: Arial;
    font-size: 15px;
    box-sizing: border-box;
}

h1
{
    font-weight: bold;
    text-align: center;
}

.meal
{
    border: 2px black solid;
    margin: 15px;
    float: left;
}

.name
{
    float: right;
    clear: right;
    padding: 0px;
    border-left: 2px black solid;
    border-bottom: 2px black solid;
    font-weight: bold;
}

.describe
{
    float: right;
    margin: 15px;
    text-align: justify;
}

@media (min-width: 992px)
{
    .col-lg-12
    {
        width: 100%;
    }
    .col-lg-4
    {
        width: 33.33%;
    }
}

Answer 1

div的宽度设置为33.33％，但div除了它们之外还有边距。因此，这三个人都无法居住在一条线上。您可以减少div width（~30.33％）或减少div中的margin。

使用CSS Float使div成为一行？

1 个答案: