这段代码在桌面电脑上看起来不错。我想让这些盒子一个接一个地出现在手机上。Box2和box4(这些将包含文本)应该是全宽的移动设备。不幸的是，无论我如何尝试，它都失败了，它在手机上崩溃了。你能帮我调整一下代码吗?
.box {
width: 10%;
padding: 13px;
height: 200px;
background: blue;
margin-right: 5px;
float: left;
}
.box2 {
width: 30%;
padding: 13px;
height: 200px;
background: green;
margin-right: 5px;
float: left;
}
.box3 {
width: 10%;
padding: 13px;
height: 200px;
background: yellow;
margin-right: 5px;
float: left;
}
.box4 {
width: 30%;
padding: 13px;
height: 200px;
background: red;
margin-right: 0;
float: left;
}<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box2">
kdféajkdéfdéf
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box4">
hdhdhgdghd
</div>最简单的方法是使用媒体查询在移动宽度上应用规则。然后在一个包含div中包装你的。boxdiv，然后使用flexx将flex-direction从row更改为column。在同一查询中，将.boxdiv宽度设置为所需的大小。Kevin Powell在这里很好地介绍了flex
在下面的示例
/* Added this */
.container {
display:flex;
}
.box {
width: 10%;
padding: 13px;
height: 200px;
background: blue;
margin-right: 5px;
float: left;
}
.box2 {
width: 30%;
padding: 13px;
height: 200px;
background: green;
margin-right: 5px;
float: left;
}
.box3 {
width: 10%;
padding: 13px;
height: 200px;
background: yellow;
margin-right: 5px;
float: left;
}
.box4 {
width: 30%;
padding: 13px;
height: 200px;
background: red;
margin-right: 0;
float: left;
}
/* added this */
@media only screen and (max-width: 600px) {
.container {
flex-direction:column;
}
.box2, .box4 {
width:auto;
}
}<div class='container'>
<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box2">
kdféajkdéfdéf
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box4">
hdhdhgdghd
</div>
</div>将所有四个盒子存储在一个容器div中。然后在容器上使用display:flex。默认情况下，所有的子元素，在这种情况下，盒子将保持在行。
但是在媒体查询中，将它们设置为行中列。代码如下:
/* Add this to style the child elements of the container */
.container {
display:flex;
}
/* This will fix your issue */
@media only screen and (max-width: 600px) {
.container {
flex-direction:column;
}
}
.box {
min-width: 10%;
padding: 13px;
height: 200px;
background: blue;
margin-right: 5px;
float: left;
}
.box2 {
min-width: 30%;
padding: 13px;
height: 200px;
background: green;
margin-right: 5px;
float: left;
}
.box3 {
min-width: 10%;
padding: 13px;
height: 200px;
background: yellow;
margin-right: 5px;
float: left;
}
.box4 {
min-width: 30%;
padding: 13px;
height: 200px;
background: red;
margin-right: 0;
float: left;
}<div class="container">
<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box2">
kdféajkdéfdéf
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box4">
hdhdhgdghd
</div>
</div>这将按照您想要的方式工作。试着在评论中告诉我
最好的方法是使用CSS Grid
你把你的盒子围在一个容器网格中
在这个网格的列上放一个媒体查询
.container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr;
gap: 10px
}
@media (min-width: 35em) {
/* 560px */
}
@media (min-width: 48em) {
/* 768px */
.container {
grid-template-columns: 20% 80%;
}
}
@media (min-width: 62em) {
/* 992px */
.container {
grid-template-columns: 10% 40% 10% 40%;
}
}
@media (min-width: 92em) {
/* 1312px */
}
.container img {
width: 90px;
max-width: 90%;
}
.box,
.box3 {
text-align: center;
margin: 0;
padding: 0;
}
.box {
padding: 13px;
background: blue;
}
.box2 {
padding: 13px;
background: green;
}
.box3 {
padding: 13px;
background: yellow;
}
.box4 {
padding: 13px;
background: red;
}<div class="container">
<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" />
</div>
<div class="box2">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At exercitationem labore pariatur perferendis quas rem voluptas? Beatae fuga hic ipsam laboriosam mollitia perspiciatis porro quam sapiente vel. Incidunt, iusto, sapiente.</div>
<div>Alias et incidunt magni mollitia nam, nesciunt nulla odit officiis pariatur porro, quas quibusdam ratione, saepe sint suscipit tempora voluptatem? Deserunt fuga hic itaque reiciendis repellat. Consectetur fugit qui voluptas?</div>
<div>Architecto assumenda beatae deserunt dicta distinctio enim est et eveniet expedita fugit id incidunt iusto minima molestiae neque non praesentium repudiandae sit tempora, ut veniam vero voluptas voluptate, voluptates voluptatibus?</div>
<div>Eaque eveniet expedita itaque molestias quisquam reprehenderit tempore voluptatibus. Accusantium at consequatur culpa cumque dignissimos dolore, ducimus eaque ex libero magnam, modi nam natus odit quis quisquam, quo rem voluptates!</div>
<div>Ad alias delectus dicta dolorem nesciunt non odit recusandae sapiente. Accusantium consequuntur corporis debitis eaque earum, esse ex, exercitationem expedita explicabo maiores molestiae nesciunt odit porro quidem rem temporibus tenetur!</div>
<div>Adipisci eveniet exercitationem explicabo labore nam numquam perferendis possimus quasi quidem recusandae, reprehenderit sapiente sunt tempore unde veritatis. Blanditiis maxime, natus quo sit voluptatem voluptatibus? Facere molestias nesciunt obcaecati
totam.</div>
<div>Ab, accusamus alias doloribus non odit suscipit veritatis! Iure magnam numquam quo sequi? Asperiores consectetur dolorem doloremque exercitationem, impedit iure laborum nesciunt nulla officiis porro, praesentium quas vitae. Cupiditate, sequi!</div>
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" />
</div>
<div class="box4">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam asperiores aspernatur consequatur consequuntur et explicabo fugiat hic iste magnam magni, optio placeat praesentium quae quod recusandae reiciendis, tempora temporibus?</div>
<div>Labore nulla possimus quas quis reiciendis sapiente soluta suscipit tenetur veniam voluptatum. At beatae consequatur earum natus neque placeat sapiente. Consectetur cum, debitis enim harum maiores non pariatur possimus quos?</div>
<div>Aliquam aliquid animi aperiam aut consequatur consequuntur culpa dicta ducimus eaque eligendi error fuga harum, ipsam iste laboriosam maxime mollitia necessitatibus nobis odio odit ratione repellat suscipit tempora vero voluptates?</div>
<div>Accusamus ad, architecto at, beatae consectetur consequatur consequuntur culpa cum cumque delectus dicta doloremque earum eos excepturi facilis impedit in ipsum labore minima quae quas qui quibusdam quidem repellat, vero.</div>
<div>Autem beatae consequuntur delectus, doloribus excepturi incidunt ipsum neque non omnis pariatur recusandae sapiente veritatis? Assumenda commodi corporis debitis illo in modi, molestias neque officia officiis quaerat repellat vitae voluptatum.</div>
<div>Deleniti impedit in laborum sunt. Alias, architecto beatae consectetur deleniti deserunt dicta eius excepturi facilis necessitatibus nesciunt obcaecati omnis porro, provident, quisquam repellat similique sit soluta suscipit tempore vel voluptatibus.</div>
<div>Consequatur ea ex hic, ipsam itaque natus nesciunt non porro quas, quod reprehenderit rerum temporibus ut veritatis voluptas voluptate voluptatibus. Doloribus et quisquam suscipit ullam veniam! Ab aut fuga natus.</div>
<div>Commodi consequatur expedita quae quia voluptatibus! Aliquam animi architecto debitis delectus doloremque error esse est, et hic labore, odio quae quasi, quibusdam quidem repellat reprehenderit sint vel. Aliquid iusto, odio.</div>
<div>Asperiores, atque, aut commodi debitis distinctio dolores eligendi esse iure iusto laudantium molestias, nihil nostrum odit placeat porro quibusdam quis reiciendis reprehenderit sunt ullam. Beatae corporis cupiditate fugiat harum magni?</div>
<div>Amet consequatur cum deserunt ea est et hic, labore modi placeat tempora. Eaque eius facilis iure! Accusantium, asperiores eum explicabo ipsa labore natus neque repudiandae. Eos facilis quasi quidem sint?</div>
</div>
</div>