Question

我理解这个问题已被无数次问过，我已经看过了。好吧，我目前正在一个网站上工作，只是为了个人练习，我开始做布局。它上面有Boostrap网格系统，我们正在查看的特定区域有两个col-md-3和一个col-md-6，我们正在查看col-md-6。

基本上我假装为一个举办派对和活动等的企业建立一个网站，你可以通过ID和类的名称来明确地说出来。

正如我们在屏幕截图中看到的那样，当我调整窗口大小时，较大的#Events div中的＃h1，＃EventParagraph和.event会在我调整页面大小时被移动和混乱。

我正在努力实现两件事中的任何一件，严格制作桌面视图，并且根本不需要移动，或者使其与移动设备和平板电脑兼容，并且移动和调整大小反映了这些更改。我想为两者编写解决方案。

以下是图片结果：

这就是最初的样子

然后我按下浏览器上的恢复按钮时会发生这种情况 然后，当我进一步缩小浏览器时会出现这种情况

这是当前的代码。

CSS

#Events {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 300px;
min-width: 90%;
margin-top: 20px;
margin-left: 25px;
overflow: auto;
}

#Party {
height: 150px;
width: 150px;
border-color: black; 
border-width: 1px; 
border-style: solid;
float:right;
margin-right:15px;
margin-top: 65px;
border-radius: 75px;
}

#h1 {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 50px;
min-width: 300px;
float:left;
margin-left: 15px;
margin-top: 15px;
}

#EventParagraph {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 150px;
width:330px;
margin-left: 15px;
margin-top:70px;
}

.event {
border-color: black; 
border-width: 1px; 
border-style: solid;
height: 50px;
width: 200px;
background-color: white;
margin-left: 15px;
margin-top: 10px;
}

.event h1 {
font-family: Friday Night Lights, sans-serif;
height:inherit;
}

HTML

<div class="row">
    <div class="col-md-3" style="border-color: black; border-width: 1px; border-style: solid; height: 350px">
        <div id="SocialMedia">
            khkhkh
        </div>
    </div>
    <div class="col-md-6" style="border-color: black; border-width: 1px; border-style: solid; height: 350px">
        <div id="Events">
            <div id="h1">
            </div>
            <div id="Party"></div>
            <div id="EventParagraph"></div> 
            <div class="event"></div>
        </div>
    </div>
    <div class="col-md-3" style="border-color: black; border-width: 1px; border-style: solid; height: 350px">
        <div id="SocialMedia">
            khkhkh
        </div>
    </div>
</div>

Answer 1

.container{
    margin:0 auto;
    padding:0;
    width:90%;
    min-height: 900px;
    border:1px solid black;
}
#heading,#jumbotron{
    width: inherit;
    border:1px solid black;
    margin:0px auto;
    text-align: center;
    color:white;

}
#heading{
    background-color: blue;
}

#jumbotron{
    background-color: gray;
    min-height: 150px;
    line-height: 149px;

}
#partyContainer{
    width: inherit;
    min-height: 400px;
    margin:10px auto;
    border:1px solid black;
    box-sizing: border-box;
}

.partyItem{
    width:30%;
    min-height: 200px;
    border:1px solid black;
    display:inline-block;
    padding:10px;
    box-sizing: border-box;
    margin-top:10px;
    margin-left: 25px;

}
#footer{
    text-align: center;
    margin-top: 20px;
}
@media only screen and (max-width: 768px) {
   .partyItem{
    display: block;
    width: 90%;
    margin:0px auto;

   }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
    </style>
</head>
<body>
<div class="container">
   <div id="heading">
        <h1>Company1</h1>
   </div>
   <div id="jumbotron">
        <h2>Organizing parties for you</h2>
   </div>

   <div id="partyContainer">
        <div class="partyItem">

        </div>
        <div class="partyItem">

        </div>
        <div class="partyItem">

        </div>
   </div>
   <div id="footer">
    &copy 2017
   </div>
     
</div>
</body>
</html>


<!-- begin snippet: js hide: false console: true babel: false -->

我看到你为两个div使用了相同的ID。 ID是唯一的。
您应该在外部文件中执行所有CSS

在CSS的底部，您应该看到@media。这代表媒体查询。我所做的是首先使用一些基本的css规则设置页面，设置边距，并将这些框对齐成一行，就像你在桌面上看到的那样。最重要的是，我使用媒体查询，它说的是这样的，只是为了简单 - “当你到达768px应用以下代码行” 然后，这些盒子将堆叠在一起，以使其响应。您应该使用媒体查询来处理您网站的响应方。在标签中，我放了元标记 viewport元素为浏览器提供有关如何控制页面尺寸和缩放的说明。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。此外，您应该使用这些最小高度而不是“高度”，例如，如果您将容器的“最小高度”设置为100px。这意味着，容器将以100px开始，如果其中有一些内容推动容器超过100px，它将继续增长，它将不会固定为100px。我希望这有帮助，你可以把任何你想要的东西放在那些盒子里，我只是想指出你如何使它们适应屏幕的大小，以及你可以使用哪种技术来实现这一目标。

如何在调整窗口大小时防止元素移动和/或调整大小？

1 个答案: