Question

我在父div中有两个div，我试图在特定媒体查询后切换到100％宽度，以便它们占据整个屏幕。出于某种原因，他们只是不会占据中心并占据整个宽度。造成这种情况的原因是什么？

＆＃13;

/*Non Media Query CSS */
.mainContent {
	width: 100%;	
	text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
	
}

.meContainer {
	width: 50%;
	float: left;
}

.me {
	width: 35%;	
}

.articleContainer {
	width: 50%;	
	float: right;
    text-align: left;
	padding-top:5%;
	margin:auto;
}

article {
	width:86%;	
	line-height: 115%;
    text-align:justify;
}

.container {
	width: 100%;	
	clear: both;
	text-align: center; 
}

/* The CSS I'm struggling With */



@media only screen and (max-width: 424px) {
.mainContent {
	width: 100%;	
	text-align: center;
	margin-top: 2%;
	margin-bottom: 2%;
	
}

.meContainer {
	width: 100%;
	clear:both;
	text-align: center;
	
}

.articleContainer {
	width: 100%;	
	clear:both;
    text-align: center;
	padding-top:5%;
}
}

＆＃13;

<div class="mainContent">
	<div class="meContainer">
    	<img src="https://c2.staticflickr.com/6/5834/22284877876_c2a7d1f6e0_c.jpg" alt="Portrait of Brian Funderburke" class="me">
    </div>
    
    <div class="articleContainer">
        <article>
        Hi, I'm Brian Funderburke! I'm a freelance photographer and designer based in Fredericksburg, Virginia. My work has been featured in Photographer's Forum Annual Photography Contest as well as the Popular page on 500px. I've been shooting photography and designing since 2013, and have a Bachelor's in Graphic Design with a minor in photography. When not shooting photography or designing, I enjoy spending time hiking along the Blue Ridge Mountains, reading, and other hobbies.
        </article>
    </div>
</div>

＆＃13;

Answer 1

你已经在子div中给了浮动属性，所以你必须给子div提供以下css

@media only screen and (max-width: 424px) {
.meContainer, .articleContainer{
    width: 100%;
    float:none; 
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;

}

Answer 2

您可能甚至不需要仅有屏幕＆＃39;部分。我只增加了b / c的大小，我的浏览器无法缩小到424px＆＃39;。

@media (max-width: 600px)

如果媒体查询实际上正在触发，则问题在于媒体查询中的CSS。对我来说，你的形象是中心，并且在它自己的线上，所以＆＃39;文章也是如此。文本，您只需将内部<article>标记居中。

.articleContainer article {
  margin:0 auto;
}

Answer 3

article的宽度为86％。由于您无法将块元素与text-align对齐，因此它仍然在左侧齐平。

解决方案：发表文章margin:0 auto。

/*Non Media Query CSS */

.mainContent {
  width: 100%;
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.meContainer {
  width: 50%;
  float: left;
}
.me {
  width: 35%;
}
.articleContainer {
  width: 50%;
  float: right;
  text-align: left;
  padding-top: 5%;
  margin: auto;
}
article {
  width: 86%;
  line-height: 115%;
  text-align: justify;
}
.container {
  width: 100%;
  clear: both;
  text-align: center;
}
/* The CSS I'm struggling With */

@media only screen and (max-width: 424px) {
  .mainContent {
    width: 100%;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
  }
  .meContainer {
    width: 100%;
    clear: both;
    text-align: center;
  }
  .articleContainer {
    width: 100%;
    clear: both;
    text-align: center;
    padding-top: 5%;
  }
  article {
    margin: 0 auto
  }
}

<div class="mainContent">
  <div class="meContainer">
    <img src="https://c2.staticflickr.com/6/5834/22284877876_c2a7d1f6e0_c.jpg" alt="Portrait of Brian Funderburke" class="me">
  </div>

  <div class="articleContainer">
    <article>
      Hi, I'm Brian Funderburke! I'm a freelance photographer and designer based in Fredericksburg, Virginia. My work has been featured in Photographer's Forum Annual Photography Contest as well as the Popular page on 500px. I've been shooting photography and
      designing since 2013, and have a Bachelor's in Graphic Design with a minor in photography. When not shooting photography or designing, I enjoy spending time hiking along the Blue Ridge Mountains, reading, and other hobbies.
    </article>
  </div>
</div>

为什么在他们的父母中赢得我的divs中心？

3 个答案: