css float: right 不能正常工作
[英]css float: right is not working correctly
問題描述
我是 web 開發的新手，我正在嘗試自己復制這個網站。
現在我遇到了一個問題。
我不確定為什么 float: left （在@media 下）不能正常工作。 我確保應用 box-sizing: border-box 以允許在元素的總寬度和高度中包含填充和邊框。
下面是我的代碼：
* { box-sizing: border-box; } body{ margin-top: 40px; background-color: #F9F9FB; }.container-fluid { margin-top: 50px; } h3 { border-left: 1px solid black; border-bottom: 1px solid black; margin: 0px; padding: 1px; width: 33.33%; height: 28px; float: right; text-align: center; background-color: #B59F84; }.row div { border: 1px solid black; padding: 0px; margin: 10px; background-color: #FFFFF5; } p { margin: 0px; padding: 10px; clear: right; } /********** Large devices only **********/ @media (min-width: 992px) {.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; }.col-lg-1 { width: 8.33%; }.col-lg-2 { width: 16.66%; }.col-lg-3 { width: 25%; }.col-lg-4 { width: 33.33%; }.col-lg-5 { width: 41.66%; }.col-lg-6 { width: 50%; }.col-lg-7 { width: 58.33%; }.col-lg-8 { width: 66.66%; }.col-lg-9 { width: 74.99%; }.col-lg-10 { width: 83.33%; }.col-lg-11 { width: 91.66%; }.col-lg-12 { width: 100%; } }
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <title>Assignment Solution for Module 2</title> </head> <body> <h1 style="text-align: center;">Our Menu</h1> <div class="container-fluid"> <div class="row"> <div class="col-lg-4"> <h3>Div 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="col-lg-4"> <h3>Div 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="col-lg-4"> <h3>Div 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </body> </html>
我確保應用 box-sizing: border-box 以允許在元素的總寬度和高度中包含填充和邊框。
編輯：應該是float: left不是 float: right
1 個解決方案
解決方案1
0 2023-01-11 08:41:52
您需要首先設置卡片的寬度。 對於響應能力， go 為max-width 。 在此示例中，我為每張卡片使用flexbox以及max-with:400px （根據您的需要進行更改）。 有了這些額外的幾行，您的row就會響應。 （在我的示例中，它們位於頁面中間，您可以通過播放justify-content來更改它）。
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.row div {
border: 1px solid black;
max-width: 400px;
padding: 0px;
margin: 10px;
background-color: #FFFFF5;
}
CSS 浮動右側無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.