英文:
Issue with floated elements on desktop view
问题
I am working on a layout that contains some mainbars and some sidebars, on mobile it is fine but there is an issue on desktop view.
在移动端一切正常，但在桌面视图中存在问题。
There are unnecessary spaces between the mainbars and between the sidebars on desktop view.
在桌面视图中主栏之间和侧边栏之间有不必要的间距。
Please let me know the proper way to arrange the elements using CSS.
请告诉我使用CSS来正确排列这些元素的方法。
See the attached images:
请查看附加的图片：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.content {
background-color: brown;
box-sizing: border-box;
color: white;
font-size: 2em;
max-width: 800px;
margin: 0 auto;
}
.main {
background-color: green;
width: 70%;
float: left;
box-sizing: border-box;
border: 2px solid white;
margin-bottom: 8px;
clear: both;
}
.sidebar {
background-color: blue;
width: 30%;
float: right;
box-sizing: border-box;
border: 2px solid white;
margin-bottom: 8px;
clear: both;
}
.clear{
clear: both;
}
@media only screen and (max-width: 500px) {
.main, .sidebar {
width: 100%;
clear: both;
}
}
<!-- language: lang-html -->
<head>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
</head>
<div class="content">
<div class="sidebar">
1-Sidebar
</div>
<div class="sidebar">
2-Sidebar
</div>
<div class="main">
3-Main
</div>
<div class="sidebar">
4-Sidebar
</div>
<div class="main">
5-Main
</div>
<div class="main">
6-Main
</div>
<div class="sidebar">
7-Sidebar
</div>
<div class="clear"></div>
</div>
<!-- end snippet -->
Update for @A Haworth reply:
请查看附加的图片。
英文:
I am working on a layout that contain some mainbars and some sidebars, on mobile it is fine but there is issue on desktop view.
There are unnecessary spaces between the mainbars and between the sidebars on desktop view.
Please let me know the proper way to arrange the elements using css.
See the attached images
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.content {
background-color: brown;
box-sizing: border-box;
color: white;
font-size: 2em;
max-width: 800px;
margin: 0 auto;
}
.main {
background-color: green;
width: 70%;
float: left;
box-sizing: border-box;
border: 2px solid white;
margin-bottom: 8px;
clear: both;
}
.sidebar {
background-color: blue;
width: 30%;
float: right;
box-sizing: border-box;
border: 2px solid white;
margin-bottom: 8px;
clear: both;
}
.clear{
clear: both;
}
@media only screen and (max-width: 500px) {
.main, .sidebar {
width: 100%;
clear: both;
}
}
<!-- language: lang-html -->
<head>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
</head>
<div class="content">
<div class="sidebar">
1-Sidebar
</div>
<div class="sidebar">
2-Sidebar
</div>
<div class="main">
3-Main
</div>
<div class="sidebar">
4-Sidebar
</div>
<div class="main">
5-Main
</div>
<div class="main">
6-Main
</div>
<div class="sidebar">
7-Sidebar
</div>
<div class="clear"></div>
</div>
<!-- end snippet -->
Update for @A Haworth reply:
Please see the attached image.
答案1
得分: 2
CSS浮动在某些情况下很有用，例如，当您希望文本围绕一个元素浮动时，但在给定情况下可能会导致问题。
CSS网格可以在更宽的视口设置中提供帮助。
更新：显示所需布局的图片已更改，原始答案不再适用。所以这里有一个稍微不同的方案。
您可以修改HTML，使所有主要元素都在一个父div内，而所有侧边栏元素都在另一个父div下面。
然后，我们在更宽的视口上使用网格来将两个（主要和侧边栏）定位在宽度的70%和30%处，新的设置意味着这两列是相互独立的 - 只是两个div的子元素在垂直方向上一个接一个地排列。
对于较窄的视口，我们将内容元素设置为单列网格。我们强制每个元素进入我们想要的网格行。似乎没有明显的算法来决定这一点，因此每个元素都设置了一个CSS变量（在了解确切要将哪个元素放在较窄的设置中的位置时，您将不得不设置这个变量），然后用它来通知网格应该位于哪个位置。
英文:
CSS float is useful when you want e.g. text to float around an element but it leads to problems in the given situation.
CSS grid can help instead for the wider viewport settings.
UPDATE: the picture showing the required layout has changed and the original answer here no longer applies. So here's a slightly different scheme.
What you can do is alter your HTML so all the main elements come within one parent div and all the sidebar elements under another.
Then we use grid on the wider viewport to position the two (main and sidebar) at 70% and 30% of the width respectively and the new setup means the two columns are independent of each other - it's just the two divs having their children one after the other vertically.
For the narrower viewport we make the content element be a single column grid. We force each element to go into the grid row we want.There appears not to be an obvious algorithm for deciding this so each of the elements sets a CSS variable (which you will have to set when you know exactly which element is to go where on the narrower setting) which is then used to inform the grid which position it should be in.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<style>
.content {
background-color: brown;
box-sizing: border-box;
color: white;
font-size: 2em;
width: min(800px, 100vw);
margin: 0 auto;
display: grid;
grid-template-columns: 7fr 3fr;
}
.main>* {
background-color: green;
box-sizing: border-box;
border: 2px solid white;
margin-bottom: 8px;
}
.sidebar>* {
background-color: blue;
box-sizing: border-box;
border: 2px solid white;
margin-bottom: 8px;
}
@media only screen and (max-width: 500px) {
.sidebar>*,
.main>* {
grid-row: var(--r);
}
.content {
grid-template-columns: 1fr;
}
.main,
.sidebar {
display: contents;
}
}
</style>
</head>
<body>
<div class="content">
<div class="main">
<div style="--r: 3;">
3-Mains<br>more lines<br>lines..
</div>
<div style="--r: 5;">
5-Main
</div>
<div style="--r: 6;">
6-Main<br>more lines<br>lines...
</div>
</div>
<div class="sidebar">
<div style="--r: 1;">
1-Sidebar
</div>
<div style="--r: 2;">
2-Sidebar
</div>
<div style="--r: 4;">
4-Sidebar
</div>
<div style="--r: 7;">
7-Sidebar
</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
ORIGINAL ANSWER:
The layout for narrower viewports does not on the face of it have a definite logic so it seems best to leave the HTML as it is as then the narrow viewport layout is just the natural layout.
For the wider viewports, the trick here is to define a grid with 70%/30% width split and also to set the flow to be dense. This means the system will fill up from the top each time if there is space. So for example in this case the main which is number 3 will go into column 1 row 1 as there is space for it (I've added a bit of extra text to prove that the system adjusts to the content).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.content {
background-color: brown;
box-sizing: border-box;
color: white;
font-size: 2em;
width: min(800px, 100vw);
margin: 0 auto;
display: grid;
grid-template-columns: 7fr 3fr;
grid-auto-flow: dense;
row-gap: 8px;
}
.main {
background-color: green;
box-sizing: border-box;
border: 2px solid white;
;
grid-column: 1;
}
.sidebar {
background-color: blue;
box-sizing: border-box;
border: 2px solid white;
grid-column: 2;
}
@media only screen and (max-width: 500px) {
.main,
.sidebar {
width: 100%;
}
.content {
display: block;
}
}
<!-- language: lang-html -->
<head>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
</head>
<div class="content">
<div class="sidebar">
1-Sidebar
</div>
<div class="sidebar">
2-Sidebar
</div>
<div class="main">
3-Main
<p>with some more text over more than one line</p>
</div>
<div class="sidebar">
4-Sidebar
</div>
<div class="main">
5-Main
</div>
<div class="main">
6-Main
</div>
<div class="sidebar">
7-Sidebar
</div>
<div class="clear"></div>
</div>
<!-- end snippet -->
Note: I have inferred that as you set a max width to .content you want the whole viewport width to be used if it is narrower than 800px. Obviously change the width setting if something else is required.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论