时间戳

首页 > 解决方案 > 溢出而不是在边界内开始新行

html - 溢出而不是在边界内开始新行

问题描述

我已经创建了一种博客网站的东西，但是当我缩小屏幕时你可以看到，表格所在的部分超出了边界。

我知道我可以使用溢出：隐藏；

但我真正想要的是重新调整表格，使其保持在边界内。

也欢迎有关代码的任何其他提示，因为我仍然是这方面的新手。

提前致谢！

比约恩

*{
    box-sizing: border-box;
}
body{
    background-size: 100%;
    background-image: url('images/foodBackground.jpg');  
    background-attachment: fixed;  
}

.wrapper{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 50%;
    border: 3px solid black;
    margin: 25px 50px;
    padding: 20px;
    padding-bottom: 70%;
    animation: upper 5s ;
}
@keyframes upper {
    0% { opacity: 0;}
    100% { opacity: 1;}

}

.firstPost{
    min-width: 100%;
    h1{
    text-transform: uppercase;
    }
    text-align: center;
}
.onderlijn{
    margin: 50px 0;
    height: 1px;
    background-image: linear-gradient(
        to right,
        rgba( black, 0),
        rgba( black, 1),
        rgba( black, 0));
        }

.secondPost{
    text-align: center;
    list-style-position: inside;
    ul{
        text-align: start;
    }
}
.roman{
    li{
        list-style-type: upper-roman;
    }
    li:nth-child(1){
        color: green;
    }
    li:nth-child(2){
    color: red;
    }
    }
.recipe{
    display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-width: 100%;
    h3{
        padding-bottom: 20px;
        text-align: center;
        margin-bottom: 40px;
    }
}
.table{
    width: 80em;
    table{border: 3px solid black;}
    td{border-bottom:1px solid black;
        border-left: 1px solid black;}
    th{border-bottom: 3px solid black;
        border-right: 3px solid black;}
}
.explanation{
    font-style: italic;
    font-weight: 600;
    li{padding-top: 10px;}
}
.formulier{
    border: 1px solid #e25050;
    background-color: rgb(212, 198, 198);
    font-weight: 600;
    padding: 30px;
    textarea{
        margin-left: 20px;
        margin-top: 30px;
        width: 80%;
    }
    input{
        margin-left: 8px;
    }
    button{
        margin-left: 65px;
        padding: 3px;
    }
    button:hover{background-color: green;
    padding: 3px;}
}
<html lang="en">

<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap kopie.css">
    <title>Project</title>
</head>

<body>
    <div class="wrapper">
        <div class="firstPost">
            <h1>Welcome to my foodblog</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Dolore est reprehenderit ea dolorem blanditiis dignissimos esse reiciendis? Iure,
                odit id possimus quod ipsam veniam, labore voluptas error corrupti dolorem architecto?</p>
        </div>
        <hr class="onderlijn">
        <div class="secondPost">
            <h3>
                Most healthy fruits
            </h3>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque nemo molestias quibusdam soluta,
                esse dolorum deserunt,
            <ul class="fruits">
                <li>Banana</li>
                <li>Apples</li>
                <ul class="roman">
                    <li>Green</li>
                    <li>Red</li>
                </ul>
                <li>Pineapple</li>
                <li>Orange</li>
            </ul>
            impedit praesentium quidem similique sit culpa beatae reprehenderit fugit.
            Voluptatem officia illum repudiandae doloribus.
            </p>
        </div>
        <hr class="onderlijn">
        <div class="recipe">
            <h3>How to make a banana pancake</h3>
            <div class="table">
                <table class="table">
                    <tr>
                        <th> Ingrediënts </th>
                        <td>Flour</td>
                        <td>Eggs</td>
                        <td>White sugar</td>
                        <td>Milk</td>
                        <td>Bananas</td>
                    </tr>
                    <tr>
                        <th> Amount </th>
                        <td>1 cup</td>
                        <td>1</td>
                        <td>1 tablespoon</td>
                        <td>1 cup</td>
                        <td>2 </td>
                    </tr>
                </table>
                <div class="explanation">
                    <ol>
                        <li>Combine flour, white sugar, baking powder and salt. In a separate bowl, mix together egg,
                            milk, vegetable oil and bananas.</li>
                        <li>Stir flour mixture into banana mixture; batter will be slightly lumpy.</li>
                        <li>Heat a lightly oiled griddle or frying pan over medium high heat. Pour or scoop the batter
                            onto the griddle, using approximately 1/4 cup for each pancake. Cook until pancakes are
                            golden brown on both sides; serve hot.</li>
                    </ol>
                </div>
            </div>
        </div>
        <hr class="onderlijn">
        <div class="formulier">
            <form>
                <label for="firstName">Name : </label>
                <input type="text" name="firstName" placeholder="First name" required>
                <br>
                <label for="post">Post : </label>
                <textarea name="post" id="post" rows="5px" placeholder="Write your blog piece right here"
                    required></textarea>
                <br>
                <button type="submit">Submit</button>
            </form>
        </div>
    </div>
</body>

</html>

标签： htmlcssflexboxoverflowborder

解决方案

推荐阅读