Question

我在课堂上有一个div＆＃34; work＆＃34;它覆盖了另一个名为＆＃34;＆＃34;＆＃34;即使它们都设置为自动高度。请记住，我使用媒体查询编写了480px的屏幕尺寸。查看图片，看看我在说什么。The button is overlaping onto the div below

＆＃13;

docker run --name php-fpm --rm -it -v /e:/var/www/html php:7.1.4-fpm  /bin/bash

＆＃13;

export const ROUTES: Routes = [
 { path: '',      component: HomeComponent },
 { path: 'home',  component: HomeComponent },
 { path: 'about', component: AboutComponent },
 { path: 'list', component: ListComponent},
 { path: 'detail', loadChildren: './+detail#DetailModule'},
 { path: 'barrel', loadChildren: './+barrel#BarrelModule'},
 { path: '**',    component: NoContentComponent }
];

＆＃13;

Answer 1

已添加

.about

由于按钮浮动到左侧，因此应将其清除.work { max-height: auto; background-color: #f2f2f2; font-family: Myriad Pro; text-align: center; float: left; width: 100%; } .work .container { width: 100%; height: 90%; padding: 5% 5%; } .work img { width: 100%; height: 100%; border: 2px solid GhostWhite; border-radius: 4px; margin-top: 10px; overflow: hidden; } .work button { margin-top: 10px; float: left; background-color: #0080ff; border-radius: 4px; border: 2px solid GhostWhite; margin-bottom: 30px; padding: 10px 20px; text-align: center; } .work button a { color: #ffffff; font-weight: lighter; text-decoration: none; } /* About me */ .about { background-color: #000000; #ffffff; max-height: auto; max-width: 100%; font-family: Myriad Pro; text-align: center; clear: both; } .about .container { max-width: 100%; max-height: 100%; padding: 10%; font-size: 1.2rem; }。

<div class="work">
  <div class="container">
    <h3>MY WORK</h3>
    <hr>
    <div class="gallery">
      <img id="image-1" src="file:///C:/Users/Nelson/Desktop/Portfolio/Images/taduuda-72915.jpg">
      <button><a href="#">Learn More</a></button>
    </div>


    <div class="gallery">
      <img id="image-2" src="file:///C:/Users/Nelson/Desktop/Portfolio/Images/taduuda-72915.jpg">
      <button><a href="#">Learn More</a></button>
    </div>
  </div>
</div>

<!-- About Me -->

<div class="about">
  <div class="container">
    <h3>ABOUT ME</h3>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere lacinia urna vel dapibus. Suspendisse nec porttitor ipsum. Etiam lorem dolor, pulvinar eu magna ac, lobortis scelerisque nulla. Aenean vel fringilla neque, at porta risus. Praesent
      vitae congue dolor. Morbi pharetra egestas lacinia. Nam luctus dictum aliquam. Vivamus vestibulum egestas odio, ut lacinia justo. Nullam vulputate blandit efficitur.</p>
  </div>
</div>

datetime64[D]

Answer 2

你必须清除.gallery中存在的浮动

.gallery:after {
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

有关清除浮动的更多信息参考 https://css-tricks.com/all-about-floats/#article-header-id-4

Answer 3

以下是的工作方式以及强制他们的方法。解释在代码及其注释中。另外，这里有一个jsFiddle：https://jsfiddle.net/sheriffderek/xdgLLucj/

.parent {
  background: #f06;
  padding: 1rem;
  margin-bottom: 1rem;
}

.parent .child {
  background: pink;
  padding: 1rem;
}

.parent.natural {
  /* natural */
}

.parent.child-floated .child {
  float: left;
  /* child is in a different flow */
  /* parent is confused... */
}

.parent.both-floated, .parent.both-floated .child {
  float: left;
  /* but now what about the parent's parent... */
  /* + no longer 100% width */
}

.parent.overflow-hidden {
  overflow: hidden;
  /* causes edge case problems in old browsers */
  /* still an issue? no... */
  /* + no longer 100% width */
  width: 100%;
}
.parent.overflow-hidden .child {
  float: left;
}

/* you can use this to 'clear floats' - refered to generally as a 'clear-fix' (hack) */
.clear-floats:after {
  content:" ";
  display:block;
  clear:both;
} /* added to markup */
.parent.clear-floats .child {
  float: left;
}

/* also... read about this when you start running into padding problems and unexpected widths:  https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

<div class="parent natural">
  parent: natural
  <div class="child">child</div>
</div>

<div class="parent child-floated">
  parent: just the child floated
  <div class="child">child</div>
</div>

<div class="parent both-floated">
  parent: both floated
  <div class="child">child</div>
</div>

<div class="parent overflow-hidden">
  parent: overflow: hidden
  <div class="child">child</div>
</div>

<div class="parent clear-floats">
  parent: clear-floats<br>
  this is the best option - unless you want to use flexbox - where you can leave this kind of thing behind : )
  <div class="child">child</div>
</div>

即使先前的高度设置为自动，Div也会重叠下面的一个

3 个答案: