-1

我知道这个问题已经被问过无数次了，我已经看过了。好的，我目前正在做一个网站，只是为了个人练习，并从做布局开始。它上面有 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>
4

1 回答 1

0 

.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 -->

  1. 我看到您对两个 div 使用了相同的 ID。ID 是唯一的。

  2. 您应该在外部文件中完成所有 CSS

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

于 2017-08-08T00:43:30.837 回答