css float: right 不能正常工作
[英]css float: right is not working correctly
问题描述
I'm new to web development and I'm trying to replicate this website on my own.
我是 web 开发的新手，我正在尝试自己复制这个网站。
And now I'm encountering a problem.现在我遇到了一个问题。
I'm not sure why the float: left (under @media) is not correctly working.我不确定为什么 float: left （在@media 下）不能正常工作。 I made sure to apply box-sizing: border-box to allow the inclusion of the padding and border in an element's total width and height.我确保应用 box-sizing: border-box 以允许在元素的总宽度和高度中包含填充和边框。
Below is my code:下面是我的代码：
* { 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>
I made sure to apply box-sizing: border-box to allow the inclusion of the padding and border in an element's total width and height.我确保应用 box-sizing: border-box 以允许在元素的总宽度和高度中包含填充和边框。
Edit: it should be float: left not float: right编辑：应该是float: left不是 float: right
1 个解决方案
解决方案1
0 2023-01-11 08:41:52
You need to set the card's width first of all.您需要首先设置卡片的宽度。 For responsiveness, go for max-width .对于响应能力， go 为max-width 。 In this example, Im using flexbox along with max-with:400px (change to your needs) for each card.在此示例中，我为每张卡片使用flexbox以及max-with:400px （根据您的需要进行更改）。 With those few extra lines, your row will be responsive.有了这些额外的几行，您的row就会响应。 (In my example, they are centered in the middle of the page, you can change that by playing with justify-content ). （在我的示例中，它们位于页面中间，您可以通过播放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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.