Question

我正在尝试设计一个响应式网站。对于移动视图，我想在下面的示例代码中隐藏右侧横幅div，因此我只想写下“显示：无;＆＃39;但容器div出现并覆盖行div。我只想隐藏正确的横幅而不影响其他div的对齐。如果我可以为行div设置高度或任何其他问题，请帮助我吗？

＆＃13;

 

    <div class="row clearfix">
	<div class="left-banner">
    	<img src="" alt="">
    </div>
    <div class="right-banner">
    	<img src="" alt="">
    </div>
</div>

<div class="container">
	<p></p>
</div>

＆＃13;

.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}

＆＃13;

Answer 1

使用CSS媒体查询。

@media (max-width: <desired width of viewport>) {
   .right-banner{
      display:none;
   }
}

媒体查询用于根据所需的视口调整您的设计。

有一个阅读 - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

修改

您可以尝试使用可见性：隐藏在右侧横幅上而不是显示：无，这种方式即使隐藏的空间仍然会保留，就像右侧横幅仍然存在一样。

Answer 2

为什么不尝试媒体查询？

@media all and (max-width: 658px) { // for mobile 

.right-banner{

    float:right; width:40%; display:none;

    }
}

Answer 3

您应该使用visibility: hidden代替display: none，以便其他元素＆＃39;位置不受影响。

Answer 4

你只需要在div-container float: left中声明，而不是你的代码可以工作:)

jsfiddle

<div class="row clearfix">
  <div class="right-banner">
    <img src="http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/061/38/0010613865.jpg&w=348&h=348" alt="" />
  </div>
  <div class="left-banner">
    <img src="http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/061/38/0010613865.jpg&w=348&h=348" alt="" />
  </div>
</div>
<div class="container">
  <p>Test</p>
</div>

这是css部分：

.row{width:100%;}
.left-banner{width:50%;float:left;}
.right-banner{width:50%;float:right;display:none;}
.container{width:100%;float:left;}

如何为响应式移动视图设置display：none？

4 个答案: