Question

这可能是一个非常简单的解决方案，因为它是网页设计中最基本的东西之一。

经过大量研究而没有找到答案决定问它。基本上我的网页在我的13＆＃34; Macbook但当我试图在我的27＆＃34;上显示它时，所有元素都搞砸了。桌面。我理解问题的核心是，当我设置为300px时，它覆盖了13＆＃34;但是在27＆＃34;因此导致一切都在彼此之上，但我找不到解决方案。需要明确的是，这不是100％的响应性问题，我不想为不同的屏幕设置不同的布局，但我只是希望相同的布局在许多屏幕上看起来不错，就像你正在调整页面大小一样角落。以下是一些我希望有用的代码。我也尝试过的事情：

使用em而不是px。不太有帮助。
使用％而不是px。在像第一个jumbotron那样父元素没有定义高度

HTML：

<body>
<div class="jumbotron">
    <img src="images/banner.jpg" >
</div>

<div id="menu"> 
        <ul  class="nav nav-pills navbar-left">
            <li> <p> 1 </p></li>
            <li> <p> 2 </p> </li>
            <li> <p> 3 </p></li>
            <li> <p> 4 </p></li>
        </ul>

        <ul class="nav nav-pills navbar-right">
            <li id="toleft"> <p> 5 </p> </li>
            <li> <p> 6  </p></li>
            <li> <p> 7 </p> </li>
            <li> <p> 8 </p> </li>
        </ul>
</div>

<!-- Script to fix navbar-->
<script>
    $(document).ready(function(){
        $(window).bind('scroll', function() {
            var navHeight = $( window ).height() - 450;
                if ($(window).scrollTop() > navHeight) {
                    $('#menu').addClass('fixed');
                }
                else {
                    $('#menu').removeClass('fixed');
                 }
            });
    });
</script>

<div id="displayframe">
    <div id="display">
        <img id="mainimage" src="images/col1.jpg" height="420" width="960" />
    </div>
</div>

<!-- Script for changing images with time-->
<script> 
    $(document).ready(function(){
        var imageArray = ["images/col2.jpg", "images/col3.jpg", "images/col4.jpg", "images/col5.jpg", "images/ban.jpg"];
        var count = 0;

            function loadImage(){
                $("#mainimage").attr("src", imageArray[count]);

                    if(count == imageArray.length){
                        count = 0;
                    }else{
                        count = count + 1;
                    }   
            }
            setInterval(function(){
                loadImage(); 
            }, 3000);
    })
</script>

<div class="container">
        <div id="head">
            <p> RECENT NEWS </p>
        </div>
</div> 


<div class="newsfeed">
    <ul>
        <li>
            <p style="float: left;"> <img src="images/chris.jpg" width="190px" /> </p>
            <h2></h2>
            <p id="bodypart">
            </p>
        </li>
        <li class="newselement"><p style="float: left;"> <img src="images/city.jpg" width="190px" height="280px" /> </p>
            <h2></h2>
            <p id="bodypart">
            </p></li>
        <li class="newselement"><p style="float: left;"> <img src="images/alex.jpg" width="190px" height="280px" /> </p>
            <h2></h2>
            <p id="bodypart">
            </p></li>
    </ul>
</div>

CSS：

body{
background-color: black !important;  
}

.jumbotron{
height: 320px;
background-color: black !important;  
}

.jumbotron > img{
width: 100%;
margin-top: -50px;

}

#toleft{
left: -10px;
position: relative;
}

.nav p{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
}

.navbar-left{
margin-left: 20px;
position: relative;
}

.navbar-left li{
width: 120px;
}

.navbar-right{
left: -50px;
margin-left: 0px;
position: relative;
}

.navbar-right li{
width: 140px;
}


#menu{
background-color: black;
width: 99%;
margin-top: -110px;
}

.nav li p{
padding-left: 15px;
}

.fixed {
position: fixed; 
top: 110px; 
height: 50px; 
z-index: 1;
background-color: black;
}

#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
margin-top: 130px !important;
border-radius: 4px;
background-color: white;
} 

#display ul{
position: relative;
margin: 0;
padding: 0;
height:  960px;
width: 420px;
list-style: none;
}

#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}

#head > p{
font-family: "Crimson Text";
font-size: 30px; 
font-weight: bold;
}

#head{
margin-top: 30px;
margin-left: 85px;
}

.tweets{
background-color: rgba(247,12,12,0.3);
margin-top: -800px;
margin-right: 50px; 
border: 1px solid white;
border-color: white;
}

.newsfeed{
margin-left: 100px;
width: 60%;
height: 800px;
}

.newsfeed > ul{
list-style: none;
}

.newsfeed > img{
list-style: none;
display: inline-block;
position: absolute;
float: left;
}


.newsfeed > h2{
display: inline-block;
position: absolute;
margin-top: -50px;
margin-left: 50px;
float: right;
}

.newsfeed > li{
border-bottom: 1px white;
border-top: 1px white;
border-color: white;
height: 400px;
}

#bodypart{
font-size: 17px;
}

.newselement{
border-top: 1px solid white;
}

Answer 1

为什么要使用预先固定的Px（像素）？而是使用％（百分比）来玩，这允许您根据用户的屏幕缩放网页。您可以将图像宽1600px，这将是MBP的全长，但例如在Imac上，只有当Imac的屏幕宽度为2880px时，它才会显示1600px宽的图像。因此，您还有另外1280px要填充。如果您使用100％，它将填充100％的用户屏幕正在查看您的网页。希望这有些有用。你在300px的时候失去了我。

Answer 2

我已经设置了JSfiddle here。

我发现了一些可以添加/修改的内容，以帮助改进代码并使事情更好地协调。 <img src="images/banner.jpg" >未正确关闭您错过了/ <img src="images/banner.jpg" />。此外，您的代码中的任何位置都没有清除标记，因此当页面宽度向外扩展时，页面上的元素将彼此叠加。我创建了一个类;

<div class="clear"/>
.clear{
    clear:both;
}

这个我放在你的每个元素部分下面，所以它会将它们返回到下一行。

接下来，我在整个页面内容周围放置了一个包装器和一个内容div，以对齐内容并使页面宽度达到1000px（这是大多数网站的标准）。

图像没有渲染到JSfiddle，因为路径是相对于您的计算机所以我把它们留空了。如果你想看到它更好用，请更新JSfiddle，我可以进一步帮助。

-Epik

Answer 3

实际上这只是responsive issue，因为您在不同的屏幕或分辨率上查看您的页面。因此，如果您要创建自适应网站，则必须为不同的分辨率添加@media queries。 - @media queries - Outer div应保持固定(px)或百分比(%)。 - 并且inner div或内容应根据外部div宽度进行换行，例如（宽度：100％）。 - 最后取决于不同的分辨率更改@media查询中的css。

页面布局搞乱了不同的计算机，自动调整问题

3 个答案: