带有嵌套容器的 CSS 响应式容器

Question

带有嵌套容器的 CSS 响应式容器

我对编码相当陌生。我试图做一个响应式div容器，其中包含一个较小的嵌套容器。任何人都可以提供一些指导吗？

鸡肉牛肉和寿司需要放在右上角的主容器内。我哪里错了？

body {
    margin: 0;
}

h1 {
    color: red;
    text-align: center;
}   

* {
    box-sizing: border-box;
}

p    {
    border: solid black 1px;
    width: 90%;
    height: 200px;
    background-color: red;
    font-size: 10.5px
        
}

.column {
    float: left;
    width: 33.33%
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <title>Assignment</title>
</head>
<body>
    <h1>Our Menu</h1>

<div class="row">
    <div class="column 1">
        <div id="chicken">Chicken</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu fermentum diam. Nam vitae tellus sed augue commodo tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id purus justo. Proin dignissim ligula nisl. Quisque eleifend, turpis vitae suscipit hendrerit, sem massa faucibus nunc, vel condimentum velit nibh at leo. Vivamus luctus facilisis faucibus. Aenean id rhoncus orci. Nullam feugiat lorem eros, at condimentum nibh lobortis a. Mauris finibus fringilla aliquet. Nam semper feugiat ante ac posuere. Curabitur ac magna vitae velit maximus convallis tristique eu nulla. Integer non commodo lectus, ut varius ipsum. Nunc ut volutpat magna</p>
    </div>
    <div class="column 2">
        <div id="beef">Beef</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu fermentum diam. Nam vitae tellus sed augue commodo tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id purus justo. Proin dignissim ligula nisl. Quisque eleifend, turpis vitae suscipit hendrerit, sem massa faucibus nunc, vel condimentum velit nibh at leo. Vivamus luctus facilisis faucibus. Aenean id rhoncus orci. Nullam feugiat lorem eros, at condimentum nibh lobortis a. Mauris finibus fringilla aliquet. Nam semper feugiat ante ac posuere. Curabitur ac magna vitae velit maximus convallis tristique eu nulla. Integer non commodo lectus, ut varius ipsum. Nunc ut volutpat magna</p>
    </div>
    <div class="column 3">
        <div id="sushi">Sushi</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu fermentum diam. Nam vitae tellus sed augue commodo tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec id purus justo. Proin dignissim ligula nisl. Quisque eleifend, turpis vitae suscipit hendrerit, sem massa faucibus nunc, vel condimentum velit nibh at leo. Vivamus luctus facilisis faucibus. Aenean id rhoncus orci. Nullam feugiat lorem eros, at condimentum nibh lobortis a. Mauris finibus fringilla aliquet. Nam semper feugiat ante ac posuere. Curabitur ac magna vitae velit maximus convallis tristique eu nulla. Integer non commodo lectus, ut varius ipsum. Nunc ut volutpat magna</

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ste*_*ruz 5

使用 flexbox，它允许您将元素放置在行或列中。网格也是一个不错的选择。

.row {
  display: flex;
}

Run Code Online (Sandbox Code Playgroud)

移除浮动：左

.column {
  width: 33.33%
}

Run Code Online (Sandbox Code Playgroud)

为了使其更具响应性，您可以选择添加flex-wrap: wrap到.row，因此当窗口调整到足够大时，它会将一列拖到下一行。

阅读：https : //developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

归档时间：	5 年，5 月前
查看次数：	47 次
最近记录：	5 年，5 月前