CSS中的布局和定位问题_Css_Layout

CSS中的布局和定位问题

css layout

CSS中的布局和定位问题,css,layout,Css,Layout,我刚开始学习HTML和CSS，我已经在CSS网站的布局上呆了一段时间了。在第一张图片中，你可以看到我试图让它看起来如何，在第二张图片中，你可以看到它现在看起来如何。。。我试着在网上搜索，但我似乎没有掌握CSS中布局和定位的工作方式。有人知道我做错了什么吗 html 您可以使用flexbox简化代码，只要您不需要支持较旧的浏览器即可 HTML将是： <html> <head> <link href="https://fonts.googleapis.com

我刚开始学习HTML和CSS，我已经在CSS网站的布局上呆了一段时间了。在第一张图片中，你可以看到我试图让它看起来如何，在第二张图片中，你可以看到它现在看起来如何。。。我试着在网上搜索，但我似乎没有掌握CSS中布局和定位的工作方式。有人知道我做错了什么吗

html

您可以使用

flexbox

简化代码，只要您不需要支持较旧的浏览器即可

HTML将是：

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>ALISAN'S OCCASIONS</title>
</head>
<body>
    <div class="header">
      header
    </div>
    <div class="home_page">
        <div class="home_left">
           left
        </div>
        <div class="home_center">
center
        </div>
        <div class="home_right">
right
        </div>
    </div>
</body>
</html>

您可以在以下位置看到它的实际应用：

请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确地说出你在问什么。只是说它看起来不对劲没有多大帮助你是对的！我不太确定如何解释错误，但我上传了另一张图片，展示了布局现在的样子，这有多大帮助^^

* {

    box-sizing: border-box;
}


body {

    padding: 0;
    margin: 0;
    background-color: #8799b7;
    overflow-y: scroll;
    max-height: 735px;

} 


.header {

    display: block;
    background-image: url("header4.jpg");
    height: 500px;
}

.home_page {

    display: block;
    margin:0;
    padding: 0;

}

.home_left {

    display: inline-block;
    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;
}


.home_center {

    display: inline-block;
    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;
}

.home_right {

    display: inline-block;
    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Catamaran:100|Pontano+Sans|Ruda:900" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>ALISAN'S OCCASIONS</title>
</head>
<body>
    <div class="header">
      header
    </div>
    <div class="home_page">
        <div class="home_left">
           left
        </div>
        <div class="home_center">
center
        </div>
        <div class="home_right">
right
        </div>
    </div>
</body>
</html>

* {

    box-sizing: border-box;
}


body {

    padding: 0;
    margin: 0;
    background-color: #8799b7;
    overflow-y: scroll;
    max-height: 735px;

} 


.header {

    display: block;
    background-image: url("header4.jpg");
    height: 500px;
}

.home_page {

    display: flex;
    margin:0;
    padding: 0;

}

.home_page > div {
  border: 1px solid grey;
}

.home_left {

    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;
}


.home_center {

    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;
}

.home_right {

    height: 235px;
    width: 506px;
    margin: 0;
    padding: 0;
}