Question

当屏幕尺寸<768px时，彼此相邻的两个div应叠加在一起。怎么样？我的html原样很好。对于大屏幕，div很好。我正在为我的代码争取css。

＆＃13;

@media screen and (max-width: 768px) {
.first-name
{
float: left;
width: 50%
}
}

#name > div {
display:inline-block;
width:49%;
}

＆＃13;

<div id="name">
		<div>
		<div class="input"><label for="first-name">First name</label>
			<input autocomplete="on" class='inp_cont' id="first-name" name="last-name" placeholder="Enter your first name" required="" type="text"></div>
		</div>
		<div>
		<div class="input"><label for="last-name">Last name</label>
			<input autocomplete="on" class='inp_cont' id="last-name" name="last-name" placeholder="Enter your last name" required="" type="text"></div>
		</div>
		</div>

＆＃13;

Answer 1

以下是使用display: inline-block并更改宽度的替代设置：

<强> CSS

#name > div {
    display:inline-block;
    width:49%;
}

@media screen and (max-width: 768px) {
    #name > div {
        width: 100%;
    }
}

<强> HMTL

<div id="name">
    <div>
        <div class="input">
            <label for="first-name">First name</label>
            <input autocomplete="on" class='inp_cont' id="first-name" name="last-name" placeholder="Enter your first name" required="" type="text">
        </div>
    </div><div>
        <div class="input">
            <label for="last-name">Last name</label>
            <input autocomplete="on" class='inp_cont' id="last-name" name="last-name" placeholder="Enter your last name" required="" type="text">
        </div>
    </div>
</div>

请注意，在此HTML的第7行，我们在另一个的开头标记旁边有一个div的结束标记。这不是一个错误 - display: inline-block正常工作是必要的，否则空格会导致元素不能并排显示！

Answer 2

使用flexbox，然后更改所述媒体查询的flex-direction：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <style>
        .container {
            display: flex;
        }
        .box {
            margin: 1%;
            padding: 1%;
            flex-basis: 46%;
        }
        @media screen and (max-width: 769px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
    <body>
        <main class="container">
            <div class="box" style="background: red">
                <p>hello</p>
            </div>
            <div class="box" style="background: blue">
                <p>world</p>
            </div>
        </main>
    </body>
</html>

Answer 3

您选择了错误的元素。

您可以使用min-width媒体查询来减少CSS

＆＃13;

@media screen and (min-width: 768px) {
  #name>div {
    float: left;
    width: 50%
  }
}

＆＃13;

<div id="name">
  <div>
    <div class="input"><label for="first-name">First name</label>
      <input autocomplete="on" class='inp_cont' id="first-name" name="last-name" placeholder="Enter your first name" required="" type="text"></div>
  </div>
  <div>
    <div class="input"><label for="last-name">Last name</label>
      <input autocomplete="on" class='inp_cont' id="last-name" name="last-name" placeholder="Enter your last name" required="" type="text"></div>
  </div>
</div>

＆＃13;

或使用flex并使用@media

将min-width设置为div

＆＃13;

#name {
  display: flex;
  flex-wrap: wrap;
}

#name>div {
  flex: 1;
  min-width: 384px;/* x2 = 768px*/
  box-shadow:0 0 0 1px;/* see me*/
}

＆＃13;

<div id="name">
  <div>
    <div class="input"><label for="first-name">First name</label>
      <input autocomplete="on" class='inp_cont' id="first-name" name="last-name" placeholder="Enter your first name" required="" type="text"></div>
  </div>
  <div>
    <div class="input"><label for="last-name">Last name</label>
      <input autocomplete="on" class='inp_cont' id="last-name" name="last-name" placeholder="Enter your last name" required="" type="text"></div>
  </div>
</div>

＆＃13;

当屏幕尺寸较小时，将两个div堆叠起来

3 个答案: