Question

在缩小窗口时，我想将元素从屏幕上移开，而不是将它们挤压在一起。非常类似于此页面的顶部（带有文本的顶部图像）-http://www.kirastokes.com/schedule/。如果您将窗口缩小，图像的一部分将移出屏幕，从而可以看到文本框。除了将所有内容压缩在一起之外，页面上的元素只是有些偏移。我该怎么办？

我的jsfiddle：http://jsfiddle.net/rhe9jtqw/

react-native

#top-section-intro-container
{
    height:700px;
    position:relative;
}

#top-section-intro-image
{    
    position:absolute;
    left:0;
    top:0;
        width: 892px;
    height: 650px;
}
#top-section-intro-text-container
{

        z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;

    background-color:white;
    width: 558px;
    height: 480px;
    left: 800px;
    top: 78px;
}
.top-section-intro-text {
  left: 0px;
    padding-top: 144px;
    padding-left:95px;
    width: 530px;
    height: 285px;
    font-size:18px;
			font-family: lato;
    font-style: normal;
	text-align:justify;
    font-weight: 300;
    letter-spacing: 0.1px;
    line-height: 24px;
    color: #255957;
}

Answer 1

我会这样做。例如，如果您网站的最小宽度（看起来仍然不错）〜1000像素，则：

$(window).resize(function () {
        var x, temp = window.innerWidth;
        if((x = 1000 - temp) > 0){
            $("#top-section-intro-container").css({left:  -x});
        }
    });

Answer 2

您可以尝试为此使用CSS媒体查询。

因此，假设您要使页面保持响应状态，直到特定宽度（例如1000px）为止，您可以为其定义媒体查询。

.myTopNav {
   display: flex;
}

@media (max-width: 1000px) {
   .myTopNav {
      display: initial;
      position:absolute;
      left:0;
      top:0;
   }
}

因此，类myTopNav将仅被覆盖1000px或更小的宽度。

要了解更多信息，请看这里：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

调整窗口大小时将元素推离屏幕，而不是挤压它们

2 个答案: