Css Div-Won'；t调整以调整浏览器窗口_Css_Html_Space

Css Div-Won'；t调整以调整浏览器窗口

css html

Css Div-Won'；t调整以调整浏览器窗口,css,html,space,Css,Html,Space,我对网页设计还很陌生，所以我在这里可能会完全不知所措。。但我似乎不知道该怎么做。我有一个在我的第一个div图像，下面我想有更多的div与背景颜色，我将添加内容。但由于某些原因，我的div不能适应浏览器。每次我调整浏览器使其变小时，div背景都会分离，中间会出现一个空白任何帮助都将不胜感激。。此外，任何关于我明显的编码技能的批评反馈，都将不胜感激 <!DOCTYPE html> <html> <head> <link rel="stylesheet" t

我对网页设计还很陌生，所以我在这里可能会完全不知所措。。但我似乎不知道该怎么做。我有一个在我的第一个div图像，下面我想有更多的div与背景颜色，我将添加内容。但由于某些原因，我的div不能适应浏览器。每次我调整浏览器使其变小时，div背景都会分离，中间会出现一个空白

任何帮助都将不胜感激。。此外，任何关于我明显的编码技能的批评反馈，都将不胜感激

<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>

好一点。干杯

请用这个更改您的

css

：

body{
margin: 0px;
padding: 0px;
overflow: hidden;
}

.container{
width:100%;
margin: 0px;
padding: 0px;
}

.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}

.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
 }

.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}

一些

css

样式是错误的，例如，您将

width

和

height

与

%100

一起使用，这是错误的，会影响所有

css

样式。

此外，您还使用了

position:absolute

来表示对

div

产生影响的所有div都是不可调整的。

我建议您仔细查看代码，并尽可能多地删除，以了解实现目标的实际必要条件。一些经过清理的代码实现了我认为您要实现的目标。希望能有帮助

HTML

你的很多代码都是错误的。例如，img元素是自动关闭的<代码>您的div未正确关闭。很多CSS都是不必要的。默认情况下，div和其他块级元素的宽度为100%。我会做一个jsfiddle，看看我们是否能有一个更干净的起点。嘿，非常感谢你的帮助。我在这里真的是一个初学者，试图将教程混搭在一起，以尝试得到我想要的。。但你是对的，我相信很多都是错误的或不必要的。你们提供的看起来正是我想要的，唯一的问题是，在我的标志后面，我想要一个图像，而不是浅蓝色。这可能吗？是的，当然可能<代码>背景图像：url（“http://your/image-path.jpg");

背景尺寸：封面开始。同时更新了小提琴。祝你好运，非常感谢。我真的很感激你的帮助！默认情况下，该窗口是相对的。相对是绝对位于其内部的事物的边界。您可以将任何对象设置为相对对象，从而将嵌套边界设置为绝对位置。许多专业开发人员实际上并不理解这一点。学习定位、内联、块和内联块之间的区别，并首先启动mobile。慢慢来。你越快想要即时的满足感，你就越快跳过最重要的部分。如果你用正确的方式思考，这件事很容易。把你网站的每个主要部分想象成自己的迷你网站。
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}

.container{
width:100%;
margin: 0px;
padding: 0px;
}

.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}

.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
 }

.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}

<header class="container global-header">
    <div class="inner-w">
        <div class="large-logo-wrap">
            <img src="http://placehold.it/400x300" />
        </div>
    </div>
</header>

<section class="container section01">
    <div class="inner-w">
        Middle - arbitrary set height - I suggest you let the content decide the height
    </div>
</section>

<section class="container section02">
    <div class="inner-w">
        Other section - arbitrary set height
    </div>
</section>

*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container { /* things the sections have in common */
    width: 100%;
    float: left;
}

.inner-w {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
    padding: 1em;
    border: 1px solid rgba(0,0,0,.05); /* just so you can see */
    /* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}

.global-header {
    background-color: lightblue;
    text-align: center; /* centers inline, and inline-block elements (logo) */
}

.large-logo-wrap {
    display: inline-block;
    max-width: 8em; /* set max image size */
}

.large-logo-wrap img { /* responsive image */
    display: block; 
    width: 100%; /* fits whatever you set the wrapper to */
    height: auto;
}

.section01 { /* arbitray section */
    background-color: rgb(229,225,209);
    color: rgb(0,0,0);
    min-height: 234px; /* if you absolutly must - choose a height... use min */
}

.section02 { /* arbitray section */
    background-color: rgb(29,25,29);
    color: rgb(229,225,209);
    min-height: 346px; /* if you absolutly must - choose a height... use min */
}