HTML5 CSS：行和调整大小 [英] HTML5 CSS : Rows and Resizing
问题描述
下面的代码是响应式的，可以调整大小等。
但是我正在寻找一些真正简单的CSS来调整桌面和移动设备的大小。
I让我可以从头文件链接w3.css中使用CSS，但必须有更好的方法才能在桌面和手机上轻松显示一些内容。
移动设备默认为内联显示，但在桌面显示器上显示为3行。
是否有比w3学校更容易的解决方案？
试图做一对夫妇的行，然后调整大小，以单一的移动... ...
链接rel进入标题：
< link rel =stylesheethref =https://www.w3schools.com/w3css/4/w3.css>
< div class =w3-row>
< div class =w3-third w3-container w3-greenalign = center>
< h2> w3-third< / h2>
这里的东西也是
< / div>
< div class =w3-third w3-container w3-red>
< h2> w3-third< / h2>
< / div>
< div class =w3-third w3-container w3-blue>
< h2> w3-third< / h2>
< / div>
< / div>
在Ahmed和Raven的帮助下，我已经到了这里。但不是集中。我也改变了90％，以允许一些间距。
大部分工作，但不是集中在更大的宽度。当较小的宽度时，会翻转到单行，这很好。我正在寻找那样的移动应用。简单的代码到目前为止，我可以很容易地操作。
CSS
@media唯一屏幕和（min-width：320px）和（max-width：600px）{
.display {
width：90％;
背景：＃f1f1f1;
padding：10px;
border：固体2px＃998E67;
margin：5px;
@media仅屏幕和（最小宽度：600px）{
.display {
float：left;
宽度：30％;
背景：＃f1f1f1;
padding：10px;
border：固体2px＃998E67;
margin：5px;
}
}
不知道我是否需要这个外部div align center，似乎并不奏效。
< div align = center style =border：1px solid ## 000>
< div class =displayalign = center>
< img src =../../ images / img.pngheight =55border =0>
< h2>这是第一< / h2>
< / div>
< div class =display>
< h2>这是第二个< / h2>
< / div>
< div class =display>
< h2>这是第三个< / h2>
< img src =../../ images / imageheight =55 border =0>
< / div>
< / div>
你可以使用媒体查询，在桌面上给它们中的每一个宽度约33％，移动宽度约为100％。
@media仅屏幕和（最小宽度：320px）和（最大宽度：600px）{
.w3-third {
width：100％
}
}
@media仅限屏幕和（最小宽度：600px）{
.w3-third {
float：left;
width：33.33％;
}
}
这样，您可以使用不同的媒体查询轻松调整列的大小。
顺便说一句，请确保在父项中包含clearfix（本例中
.w3-row ）。 编辑：居中涉及一点数学。
https://jsfiddle.net/zmvphaj0/4/
宽度的计算方法是首先计算空白空间的次数（或排水沟）发生（在我们的例子中是2），所以如果您要采用全部可用宽度并减去2次排水沟，则应该留出柱子应该覆盖的剩余空间。所以你把剩下的空间除以3（注意那个公式中的括号使它工作）。
现在您给除第一个（或除最后一个以外）的所有列之外的所有列的余量留空。
同样的逻辑适用于所有其他列宽度为12列网格布局。
编辑2：使用媒体查询更新小提琴链接。
Thx Rav ...
工作小提琴：jsfiddle.net/w648ng81/36
This code below is responsive and resizes etc. But I'm looking for some real simple CSS to resize when on desktop and mobile.
I get that I can muck with the CSS from the header link w3.css, but there has to be a better way to just easily display some things on desktop vs mobile.
And mobile defaults to displaying inline, yet on desktop displays as 3 rows.
Is there an easier solution than the w3 school?
Just trying to do a couple rows, that then resize to single on mobile...
Link rel goes in header:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-row">
<div class="w3-third w3-container w3-green" align=center>
<h2>w3-third</h2>
Stuff here too
</div>
<div class="w3-third w3-container w3-red">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container w3-blue">
<h2>w3-third</h2>
</div>
</div>
I've got to here below with help from Ahmed and Raven. But not centering. I also changed to 90% to allow for some spacing.
Works for the most part, but not centering on larger width. Does flip to single rows when smaller width, which is good. I'm looking for that mobile reponse like that. Easy code so far to, and I can easily manipulate.
CSS
@media only screen and (min-width:320px) and (max-width: 600px) {
.display {
width: 90%;
background: #f1f1f1;
padding: 10px;
border: solid 2px #998E67;
margin: 5px;
}
}
@media only screen and (min-width:600px) {
.display {
float: left;
width: 30%;
background: #f1f1f1;
padding: 10px;
border: solid 2px #998E67;
margin: 5px;
}
}
Not sure if I need this outside div align center, doesn't seem to work.
<div align=center style="border: 1px solid ##000">
<div class="display" align=center>
<img src="../../images/img.png" height="55" border="0">
<h2>This is first</h2>
</div>
<div class="display"">
<h2>This is second</h2>
</div>
<div class="display">
<h2>This is Third</h2>
<img src="../../images/image" height="55" border="0">
</div>
</div>
You can use media queries for that. Give each one of them around 33% width on desktop and around 100% width on mobile.
@media only screen and (min-width:320px) and (max-width: 600px) {
.w3-third {
width: 100%
}
}
@media only screen and (min-width:600px) {
.w3-third {
float: left;
width: 33.33%;
}
}
That way, you can adjust the sizing of the columns easily using different media queries.
Btw, make sure to include clearfix on the parent (.w3-row in this case).
Edit: centering involves a little bit of math. i've created a fiddle for you with some explaination.
https://jsfiddle.net/zmvphaj0/4/
The way width is calculated is that you first count the number of times the empty space (or gutter) occurs (2 in our case), so if you were to take the full available width and subtract 2 times gutter, you'll have the remaining space that the columns should cover. So you divide the remaining space by 3 (note that the parentheses in that formula make it work). Now you give a margin-left to all but the first (or margin-right to all but last) column.
Same logic works for all other column widths in a 12 column grid layout.
Edit 2: Updated fiddle link with media queries.
Thx Rav... Working Fiddle: jsfiddle.net/w648ng81/36
这篇关于HTML5 CSS：行和调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
