（HTML CSS）试图使某些div响应

我在container div中做了2个div，我给了它们元素inline块，我希望它们并排。比如1>2，而不是相互重叠。 它们在我的屏幕尺寸（24英寸）下看起来很棒 但一旦屏幕尺寸下降，div将彼此重叠，而不是变小

你能帮我让他们有反应吗

html 欢迎来到SO

尽量使用flex，因为它响应迅速且易于使用

在break screen（767px移动设备下方）上，我只是将其方向更改为

列

自

行

*{
框大小：边框框；
}
.集装箱{
显示器：flex；
宽度：100%；
柔性流：行换行；
}
[类*=“框--”]{
显示器：flex；
保证金：25雷姆；
高度：2em；
填充：.25rem；
颜色：白色；
}
.box--half{
背景：蓝色；
弹性：130%；
}
@介质和全部（最大宽度：767px）{
.集装箱{
弯曲方向：立柱；
}
}

1.
2.

如果您拒绝使用内联显示而不是像

flex

或

grid

这样的高级显示，您可以使用

媒体查询

在较小的屏幕中显示彼此下方的

div

，例如，我使用

800px

作为断点。您可以使用

display:block

：

.container>div{
显示：内联块；
宽度：200px；
高度：200px；
背景：灰色；
文本对齐：居中；
线高：200px；
}
@介质和全部（最大宽度：800px）{
.container>div{
显示：块
}
}

内容1
内容2

嘿，谢谢，容器中有2个diffrenet div，您的示例使用了2个相同的divdivs@SarahMilner您可以使用不同的

div

我的意思是每个div中的css，内容是diffrenet@SarahMilner是的，你可以用你的desire div替换文本，或者告诉我，我会为你更新，我完全按照你说的做了，但没有用。。。我在pc上的虚拟服务器上测试的页面freecodewiki.com，但域上的页面看起来是一样的

<div class="exampleboxcontainermainpage">
    <div class="exampleboxmainpage">
        <h1>create social media Buttons with html and css</h1>
        <br>

        <div class="socialmediacontainer">
            <a href="#" class="fab fa-facebook-square"></a>
            <a href="#" class="fab fa-youtube"></a>
            <a href="#" class="fab fa-google"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br>
    </div>

    <div class="exampleboxmainpage2">
        <div class="exampleinsideboxmainpage">
            <pre class="prettyprint default">
                    <!-- Start of showing code -->
                    <xmp>

                    <div class="socialmediacontainer">
                  <a href="#" class="fa fa-facebook-square"></a>
                  <a href="#" class="fa fa-youtube"></a>
                  <a href="#" class="fa fa-google"></a>
                  <a href="#" class="fa fa-twitter"></a>
                  <a href="#" class="fa fa-instagram"></a>   
                </div>

                    </xmp>

                    <!-- !!!!! End of showing Code !!!!!-->
                </pre>
        </div>

        <button onclick="window.location.href = 'tryyourselfcodes/howto_howto_social_button.php'; " style="left:30px;" class="buttontest">
            Try yourself >>
        </button>
    </div>
</div>

.exampleboxcontainermainpage{
padding-left:100px;
}
.exampleboxmainpage {
  background-color: #f3f4fa;
  border-style: unset;
  /* padding: 23px; */
  text-align: center;
  width: 800px;
  height: 400px;
position:relative;
  display: inline-block;
  bottom:24px;
}
.exampleboxmainpage2 {
  background-color: #f3f4fa;
  border-style: unset;
  padding: 31px;
  text-align: center;
  width: 900px;
  height: 400px;
  position:relative;

  display: inline-block;
}
.exampleboxmainpage h3 {
  padding-bottom: 10px;
  display: inline-block;

}
.examplebox button {
  display: inline-block;
  text-align: center;

}
.exampleinsideboxmainpage {
  background-color: black;
  text-align: center;
  width: 700px;
  display: inline-block;


  border-style: unset;
}
.exampleinsideboxmainpage p {
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: white;
  overflow-wrap: break-word;
  display: inline-block;

}