Question

我的网站有以下html：
编辑：静态网站的https://jsfiddle.net/3v66fv3u/1/
以及我使网站响应的方法：https://jsfiddle.net/wba321bm/

<!DOCTYPE html>
<html>
  <head>
    <link href="custom.css" rel="stylesheet">
  </head>

  <body>

    <h1 class="title">Headline</h1>

    <div class="wrapper">
        <div class="left">
            <div class="top">
                <img id="img_1" src="img_1.png">
            </div>
            <div class="bottom">
                <img id="img_3" src="img_3.png">
            </div>
        </div>

        <div class="middle">
            <div class="about-text">
                <h3>small headline</h3>
                <p>actually a lot of text</p>
            </div>
        </div>

        <div class="right">
            <div class="top">
                <a href="#"><img id="img_2" src="img_2.png"></a>
            </div>
            <div class="bottom">
                <a href="#"><img id="img_4" src="img_4.png"></a>
            </div>
        </div>

    </div>

    <a href="#"><img class="banner" src="banner.png"/></a>


  </body>
</html>

这是我目前的css文件：

html {
    font-family: "Verdana", Geneva, sans-serif;
    color: white;
}

body {
    margin: auto;
    background-color: black;
    width: 1150px;
}

hr { 
    border-top: 1px dotted black;
}

.title {
    text-align: center;
    padding-bottom: 20px;
}

.wrapper {
    margin: auto;
}

.left {
    float: left;
}

.middle {
    height: 597px;
    width: 550px;
    float: left;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
    margin-top: -4px;
}

.about-text {
    margin-left: 25px;
    margin-right: 25px;
}

.right {
    float: left;
}

.gallery {
    padding-top: 100px;
    width: 100%;
    text-align: center;
}

img {
    height: 300px;
    transition: 0.5s ease;
    backface-visibility: hidden;
    /* inline-block fügt standardmäßig 4px Padding hinzu
       das muss nun wieder subtrahiert werden. */
    margin-top: -4px;
}

img:hover {
    opacity: 0.5;
}

#img_1 { 
    border-top-left-radius: 30px;
}

#img_2 { 
    border-top-right-radius: 30px;
}

#img_3 { 
    border-bottom-left-radius: 30px;
}

#img_4 { 
    border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
    width: 410px;
    height: 90px;
    position: absolute;
    right: 0px;
    bottom: 0px;

}

网站目前看起来像这样（使用静态布局）：

现在我想摆脱固定的布局，并希望使网站响应。但是，当我给字段一个相对宽度时，整个布局都搞砸了......

这是我尝试用来实现响应式布局的CSS：

html, body {
    font-family: "Verdana", Geneva, sans-serif;
    color: white;
    background-color: black;
    height: 100%;
}

hr { 
    border-top: 1px dotted black;
}

.title {
    text-align: center;
    padding-bottom: 20px;
}

.wrapper {
    border: 1px solid white;
    margin: auto;
    width: 80%;
}

.left {
    float: left;
}

.middle {
    width: 40%;
    height: auto;
    float: left;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,1);
    margin-top: -4px;
}

.about-text {
    margin-left: 25px;
    margin-right: 25px;
}

.right {
    float: left;
}

.gallery {
    padding-top: 100px;
    width: 100%;
    text-align: center;
}

img {
    width: 40%;
    height: auto;
    transition: 0.5s ease;
    backface-visibility: hidden;
    /* inline-block fügt standardmäßig 4px Padding hinzu
       das muss nun wieder subtrahiert werden. */
    margin-top: -4px;
}

img:hover {
    opacity: 0.5;
}

#img_1 { 
    border-top-left-radius: 30px;
}

#img_2 { 
    border-top-right-radius: 30px;
}

#img_3 { 
    border-bottom-left-radius: 30px;
}

#img_4 { 
    border-bottom-right-radius: 30px;
}
/* 827 x 178 */
.banner {
    width: 20%;
    height: 10%;
    position: absolute;
    right: 0px;
    bottom: 0px;

}

Answer 1

这是WHICH元素获得百分比值的问题。在我调整你的小提琴时，我将width: 30%分配给.left和right（这是图像的容器）并使图像宽度100％跨越其容器的整个宽度

见这里：https://jsfiddle.net/35n4dxqn/1/

Answer 2

好吧，当你给出一个或一个分裂相对属性时，它将被放置为相对或根据前一个div，即它不会独立于其他分区。

解决方案如果你想要使其响应一个前进而有效的方法是使用网格系统（Bootstrap类）。

整个布局与相对宽度混淆

2 个答案: