Question

我试图建立一个网站;我更改了浏览器窗口的宽度，我在页面上的图像与文本重叠。我将如何让图像消失呢？

CODE：

＆＃13;

<style>
	.contentAbout{
		font-family: sans-serif;
		width: 50%;
		height: 100%;
		padding: 0px 10px 0px 10px;
		margin-top: -10px;
	}

	#imageOne{
		height: 250px;
		float: right;
		margin-right: 170px;
		margin-top: -150px;
		border: 3px outset white;
		
		
	}
</style>

＆＃13;

<div class = "contentAbout">
	<h2>About us</h2>
    <p> a paragraph</p>
</div>
<div class = "aboutImages">
	<img id = "imageOne" src = "http://i.imgur.com/6kbSaGL.png" alt = "Car"/>
</div>

＆＃13;

Answer 1

使用 css3 ，您可以使用媒体查询在屏幕宽度更改时隐藏HTML元素。

jsfiddle

＆＃13;

.contentAbout {
  font-family: sans-serif;
  width: 50%;
  height: 100%;
  padding: 0px 10px 0px 10px;
  margin-top: -10px;
}
#imageOne {
  height: 250px;
  float: right;
  margin-right: 170px;
  margin-top: -150px;
  border: 3px outset white;
}
@media screen and (max-width: 750px) {
  #imageOne {
    display: none;
  }
}

＆＃13;

<div class="contentAbout">
  <h2>About us</h2>
  <p>a paragraph</p>
</div>
<div class="aboutImages">
  <img id="imageOne" src="http://i.imgur.com/6kbSaGL.png" alt="Car" />
</div>

＆＃13;

Answer 2

您可以使用：

<div class="content_wrap">
  <div class = "contentAbout">
    <h2>About us</h2>
    <p> a paragraph</p>
  </div>
  <div class = "aboutImages">
    <img id = "imageOne" src = "http://i.imgur.com/6kbSaGL.png" alt = "Car"/>
  </div>
  <div class="clrb"></div>
</div>
<style>
    .aboutImages{
      float: left;
    }
    .contentAbout{
        float: left;
        font-family: sans-serif;
        width: 50%;
        height: 100%;
        padding: 0px 10px 0px 10px;
        margin-top: -10px;
      }

    .clrb{
        clear:both;
    }

      #imageOne{
        height: 250px;
        margin-right: 170px;
        margin-top: -150px;
        border: 3px outset white;
      }
</style>

最小化页面图片是在文本上

2 个答案: