正常尺寸

窗口调整大小

HTML：

<div class="program"></div>
<span class="but">
    <h2 class="zaglavie">CSGOFREEITEMS <span class="beta">0.5.1</span></h2> 
    <p class="opisanie"><b>Ultimate platform</b>. The easiest way to have fancy inventory. Get the item you want just in <b>seconds</b>.</p>

    <div class="buttons">
        <a class="button1" href="#above"></a>
        <a class="button2" href="#above"></a>
        <span style="float: right; color: white; margin-right: 2px; margin-top: 1px; font-size: 10.5px;">for only <b>$4.99</b>/month</span>
    </div>
</span>

<br>

CSS：

.but
{
position: absolute;
top: 90px; 
font-family: Verdana;
display: block;
}
.zaglavie 
{
font-family: 'Open Sans', sans-serif;
color: #e5e5e5;
font-size: 31px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.39);
position: relative;
left: 70px;
top: 100px;
font-weight: 700;
}

.opisanie 
{
font-family: 'Open Sans', sans-serif;
color: #fefefe;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.39);
font-size: 16px;
left: 70px;
top: 90px;
position: relative;
width: 400px;
}

.buttons
{
margin-left: 70px;
margin-top: 120px;
width: 375px;
height: 57px;
}

.button1
{
display:block;
width: 227px;
height: 57px;
background-image: url(images/button1.png);
background-repeat: no-repeat;
float: left;
}

.button2
{
display:block;
width: 136px;
height: 57px;
background-image: url(images/button2.png);
margin-left: 240px;
}

.program
{
display:block;
width: 665px;
height: 745px;
background-image: url(images/sosi2.png);
background-repeat: no-repeat;
right: 50px;
position: relative;
float: right;
}

Answer 1

编织：http://kodeweave.sourceforge.net/editor/#4fc7d9522497eba555377ed94d364ee3

CSS Media Queries是解决您问题的好方法。

我制作了一个简单的代码段here，向您展示它们的工作原理。您可以将它们与您的网站一起使用来解决问题。

What I decided to do here使用display: table;和table-cell来固定您的元素。

然后我使用media queries将元素从display: table;更改为display: block;

此外，我将程序背景图像更改为图像元素，因为在页面调整大小时更容易设置样式和处理。

我将您的图片转换为Base64 aka DataURL（因为我在平板电脑上，没有额外的http请求就更容易测试。

以下是使用media queries

解决问题的一个非常简单的示例

您可以view this weave获得更广泛的解决方案（例如display: table;和table-cell）。

.left, .right {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 1em;
}

.left {
  left: 0;
  right: 50%;
  background: #93e9ff;
}
.right {
  right: 0;
  left: 50%;
  background: #47ffaf;
}

@media all and (min-height: 300px) {
  .left, .right {
    position: absolute;
    left: 0;
    right: 0;
  }
  .left {
    top: 0;
    bottom: 50%;
  }
  .right {
    bottom: 0;
    top: 50%;
  }
}

<div class="left">left content</div>
<div class="right">right content</div>

Answer 2

您可以使用Bootstrap，您的页面将具有良好的响应式设计。

这是带有bootstrap的代码，没有css并使用HTML部分中的图像：

<!Doctype html>
<html>
<head>
<meta charset ="utf-8">

<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

</head>
<body>

<div class="container-fluid">  
<div class="row">

<!--you can change that numbers to adapt your page to another devices like tablets-->
<!--if you see, the numbers are a proportion of 12, in this case, 5:7 (check the last div)-->
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
        <span class="but">
            <h2 class="zaglavie">CSGOFREEITEMS <span class="beta">0.5.1</span></h2> 
            <p class="opisanie"><b>Ultimate platform</b>. The easiest way to have fancy inventory. Get the item you want just in <b>seconds</b>.</p>

            <div class="buttons">
                <a class="button1" href="#above"><img src="images/button1.png"></a>
                <a class="button2" href="#above"><img src="images/button2.png"></a>
                <span style="float: right; color: white; margin-right: 2px; margin-top: 1px; font-size: 10.5px;">for only <b>$4.99</b>/month</span>
            </div>
        </span>
    </div>
            <!--if you see, the numbers are a proportion of 12, in this case, 5:7-->
    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
        <img class="img-responsive" src="images/sosi2.png">
    </div>

</div>  <!-- end row -->
</div>  <!-- end container-fluid -->

</body>

你可以从这里实现你的CSS，你会发现这将更容易和更坚实。

请参阅http://getbootstrap.com/components/

或https://www.youtube.com/watch?v=3cYWiU_HsgM（一个很好的Bootstrap 3教程）

希望这有帮助。

如何阻止两个div在窗口调整大小时互相推动

正常尺寸

窗口调整大小

2 个答案: