Question

嘿伙计我需要CSS的帮助。我不知道如何使我的html模板适合浏览器窗口。看图片

这是如何调整大小的样子：

http://s28.postimg.org/j2qkmmlqz/Untitled1.jpg

那是如何重新调整大小的

enter image description here

这是CSS

@charset "utf-8";
/* CSS Document */


body {
    width:auto;
    font: Trebuchet MS;
    background: #E6E6E6;
}

h1{
    font: Trebuchet MS;
}
#visainfo1 {
    float: left;
    width: 60%;
    padding-left: 50px;
}
#visainfo2 {
    float: right;
    width: 30%;
    padding-right: 50px;
}
#info1 {
    margin-bottom: 15px;
    padding: 8px;
    background-color: white;
}
#info2 {
    margin-bottom: 15px;
    padding: 8px;
    background-color: white;
    float: left;
    width: 45%;
}
#info3 {
    margin-bottom: 15px;
    padding: 8px;
    background-color: white;
    float: right;
    width: 45%;
}
#info4 {
    margin-bottom: 15px;
    padding: 8px;
    background-color: white;
}
#info5 {
    margin-bottom: 15px;
    padding: 8px;
    background-color: white;
}

footer{
  clear: both;
  margin-bottom: 0; 
}

HTML

<!DOCTYPE html>
<html lang="lt">
<title>Darbelis</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

<body>
<div id="visavisa">
    <header id="banner">

        <h1>The Site</h1>
    </header>
    <nav id="menu_virsut">
        <ul>
            <li><a href >menu link</a></li>
            <li><a href >menu link</a></li>
            <li><a href >menu link</a></li>
        </ul>
    </nav>

    <section id="visainfo1">
        <section id="info1">
                <h2>Aenean ac diam nec neque fringilla</h2>
          <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula dfdftrum. Integer malesuada mollis ligula at varius</p>
          <p>Integer eget mauris et urna pulvinar consectetur       hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec neque fringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at variu</p>
        </section>
            <section id="info2">
                <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec nequeringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius. Dorce pila meracone.</p>
            </section>
            <section id="info3">
                <p>Integer eget mauris et urna pulvinar consectetur hendrerit eget mauris. Praesent a interdum justo. Aenean ac diam nec nequeringilla cursus. Donec iaculis tortor in nunc vehicula rutrum. Integer malesuada mollis ligula at varius. Dorce pila meracone.</p>
            </section>
    </section>
    <section id="visainfo2">
        <section id="info4">
          <h2>New site!</h2>
                <p>Welcome to our new website. Please have a look around, any feedback is much appreciated.</p>
            </section><!---Uzdaro side bar item---->
        <section id="info5">
                <form action="MAILTO:.com" method="post" enctype="text/plain">
                First name:<br>
                <input type="text" name="name" value=""><br>
                Last name:<br>
                <input type="text" name="mail" value=""><br>
                Messege:<br>
                <input name="comment" type="text" value="" size="30"><br><br>
                <input type="submit" value="Send">
                </form>
            </section>
    </section>
    <footer>
        <nav id="menu_foot">
            <ul>
                <li>menu link</li>
                <li>menu link</li>
                <li>menu link</li>
                <li>menu link</li>
                <li>menu link</li>
                <li>menu link</li>
            </ul>
        </nav>
            <p id="footer_text">Nullam mattis luctus dolor, sed gravida tellus volutpat vel. Maecenas mollis augue sed tortor molestie ornare. Proin dapibus dictum eros ut adipiscing. Nullam ultrices dolor ut tristique sollicitudin. Integer scelerisque urna est, sit amet aliquet sapien accumsan quis. Nullam luctus semper vulputate. Nulla egestas urna nec tellus ultrices elementum. Proin dapibus dictum eros ut adipiscing. Nullam ultrices dolor ut tristique sollicitudin. Integer scelerisque</p>
    </footer>
</div>
</body>
</html>

我该如何解决？

Answer 1

这是因为您的填充以像素为单位，但您的宽度是百分比，例如评论中提到的@RomainBraun。

要解决此问题，您可以将填充更改为百分比。我已经在一个代码笔中完成了这项工作：codepen.io/anon/pen/ZGyPeY你可以看到它已经完成了这个问题。没有下降到另一条线。

示例：

#visainfo1 {
    float: left;
    width: 60%;
    padding-left: 2%; //Percentage of the parent container's width!
}

将百分比调整到div的总宽度及其水平填充小于100％的位置，你应该很好。

Answer 2

如果您不想/不能使用媒体查询，请将#visainfo2更改为

#visainfo2 {
  float: left;
  width: 30%;
  padding-right: 50px;
  margin-left: 49px;
}

应该解决你的问题。 here是一个有效的例子。它是真实的;基本的，但你应该能够把它变成你想要的东西

HTMLS / CSS窗口大小

2 个答案: