Question

希望你顺利。

我再次陷入困境，我确实尝试将这些事情解决，然后才寻求帮助，但只是一点点障碍我努力让自己的头脑......

我不能把父div用蓝色来匹配子div的高度，grr，所以不确定！

提前致谢，你们都很棒

http://codepen.io/anon/pen/GoGXGa?editors=1100

     <div class="kingcontainer">

       <div class="topbox">

      <div class="title">
           <h3>Frogging Around</h3>
       </div>

      <div class="container">
         <div class="col1">
          <div class="col1text">
            <font color="blue"> University Project </font><br style="line-       height:30px">
            Rationalise three graffiti tags as a corporate or brand logo (part 1)
          </div>
         </div>

        <div class="col2">
          <div class="col2text">
            <font color="blue"> Intentions </font><br style="line-height:30px">
           To have a bit of fun whilst exploring how to get the public    involved in idea generation.
         </div>
       </div>

        <div class="col3">
          <div class="col3text">
           <font color="blue"> Outcome </font><br style="line-height:30px">
           Who would have thought the public had such creativity.
           </div>
     </div>
    </div>
 </div>
 </div>

  div.kingcontainer {
     width: 100%;
    height: auto;
     position: relative;
        background-color: blue;
   }

  div.topbox {
     width: 100%;
     height: auto;
     position: relative;
  }

div.container {
      position: relative;
   max-width: 90%;
   height: auto;
   text-align: left;
   margin-left: 5%;
   font-family: 'Open Sans', sans-serif;
   width: 100%;
   letter-spacing: 0.5px;
 }

 div.col1 {
   width: 33%;
    min-height: auto;
   display: inline-block;
   float: left;
   vertical-align: top;
   background-color: gray;
  }

 div.col2 {
    width: 33%;
    min-height: auto;
    display: inline-block;
    float: left;
    vertical-align: top;
    background-color: gray;
 }

div.col3 {
    width: 34%;
    min-height: auto;
    display: inline-block;
   float: right;
   vertical-align: top;
  background-color: gray;
 }

 div.col1text {
    margin-top: 100px;
   margin-bottom: 100px;
   margin-left: 20px;
    margin-right: 20px;
   color: dimgray;
   display: inline-block;
}

 div.col2text {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 20px;
    margin-right: 20px;
    color: dimgray;
 }

  div.col3text {
    margin-top: 100px;
     margin-bottom: 100px;
     margin-left: 20px;
    margin-right: 20px;
    color: dimgray;
 }

此外，还有一种快速方法可以通过4个空格缩进所有代码吗？我有一种偷偷摸摸的感觉，这比在每行代码上四次弹出空格键更有效！欢呼声

Answer 1

在clear:both div之后使用col3

<div class="col3">
      <div class="col3text">
       <font color="blue"> Outcome </font><br style="line-height:30px">
       Who would have thought the public had such creativity.
       </div>
 </div>
 <div style="clear:both;"></div>  <!-- you need to add that -->

永远记住，当你使用float之后，必须清除所有浮动的div

Answer 2

当您浮动某些元素时，您需要在之后清除。

添加到div.container overflow：auto

供参考，具体如何运作：Why does 'overflow: auto' clear floats? And why are clear floats needed?

Answer 3

是缩进，您可以按“标签”。如果你想在不按退格键的情况下返回四次，请按“shift + tab”。

使父div高度最大的孩子身高

3 个答案: