Question

我需要帮助使这个HTML代码在所有尺寸上看起来都很完美。

如果我缩小或使用与1920x1080不同的显示尺寸，它看起来不一样，它看起来像这样：

以下是代码：

<style>
    body {    
        background: url(http://wc24.mariocube.com/Borders/Forecast%20Channel%20Border%20Top%20Tomorrow.png) left top no-repeat,
url(http://wc24.mariocube.com/Borders/Forecast%20Channel%20Border%20Bottom%20Tomorrow.png) left bottom no-repeat,
url(http://wc24.mariocube.com/Background%20Images/Forecast%20Channel.png) left bottom no-repeat;
        background-size: 100%, 100%, auto;
    }
</style>

<body>
    <style>
        h2.pos_fixed {
            position: fixed;
            top: 28px;
            right: 1045px;
        }

        img.pos_fixed {
            position: fixed;
            top: 41px;
            right: 1400px;
        }
    </style>

    <img width="72" height="40" src="http://mariocube.com/wii/Extracted%20Data/Extracted%20Channel%20Data/Channels/Weather%20Channel/Weather%20Layout/PNG/i_triangle1.png" class="pos_fixed" />

    <b>
        <h2 style="color: #000000; font-size: 50px;" class="pos_fixed">
            <b>Today</b>
        </h2>

如果有人需要，可以在这里找到包含所有代码的页面。

http://codepen.io/Larsenv/pen/yNbXKJ

Answer 1

.parent {
  width:100%; 
  height:500px; 
  background:red; 
}
.child {
  display:inline-block;
  width: 33.3%; 
  height:300px;
}
.child1 {

  background:green;
}
.child2 {
  background:yellow;
}
.child3 {
  background:blue;
}

<div class="parent">
  <div class="child child1"></div><div class="child child2"></div><div class="child child3"></div>
</div>

position: fixed表示它相对于窗口x y位置是固定的，在您的示例中，它将始终位于窗口顶部，而不是文档。

您可以尝试的是

.parent {
    position: relative; // this will make child div anchor to this
    width:100%; // this make this div 100% of the window. 
}
.child {
    width: 50%; // this will make div 50% of the parent. 
}

如果你玩％，你可以安排适合所有尺寸屏幕的图像。

使文本和图像固定

1 个答案: