外部div在内部修改时弄乱了

时间：2018-10-11 19:02:30

标签： html css

Divs看起来不错，但是一旦加载了图像URL，它就不会停留在div中。这与溢出有关吗？我的印象是图像是100％会拉伸到指定的高度和宽度的divs
-------------------------------------------

-------------------------------------------

-------------------------------------------

-------------------------------------------

-------------------------------------------

------------------------------------------- 

.sec3head {
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  height: 240px;
  text-align: center;
  border: px solid red;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  border-radius: 10px;
}

.sec3head4 {
  /*     pic     */
  display: inline-block;
  width: 30%;
  height: 200px;
  text-align: center;
  border: 1px solid red;
  color: #FFF;
  border-radius: 5px;
}

.sec3head5 {
  /*      text     */
  display: inline-block;
  width: 60%;
  height: 200px;
  align-content: start;
  text-align: center;
  border: px solid red;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  border-radius: 10px;
}
<div class="sec3head">
  <div class="sec3head4">
    <img src="images/" alt="alt text" height="100%" width="100%" />
  </div>
  <!--sec3headt4-->
  <div class="sec3head5">
    text
  </div>
  <!--sec3headt5-->
</div>
<!--sec3head-->
<div class="sec3head">
  <div class="sec3head5">
    text
  </div>
  <!--sec3headt5-->
  <div class="sec3head4">
    <img src="images/" alt="alt text" height="100%" width="100%" />
  </div>
  <!--sec3headt4-->

</div>
<!--sec3head-->
<div class="sec3head">
  <div class="sec3head4">
    <img src="data:image/jpeg;base64,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"
      alt="alt text" height="100%" width="100%" />
  </div>
  <!--sec3headt4-->




  <div class="sec3head5">
    text
  </div>
  <!--sec3headt5-->
</div>
<!--sec3head-->

2 个答案:

答案 0 :(得分：0)

您只缺少一点CSS。

您需要使用if。

  

vertical-align属性会影响   内联级元素生成的框的线框。

     

顶部

     

将对齐的子树的顶部与行框的顶部对齐。

https://www.w3.org/wiki/CSS/Properties/vertical-align

一面不要在图像的高度和宽度上都使用100％。添加实际图像尺寸，然后使用css将高度和宽度更改为100％。

还要阅读有关div定位以及何时使用display inline-block和何时使用css表的信息。

除了使用需要文字环绕的图片外，请勿使用float来放置其他任何内容。不是为了元素。 

vertical-align:top;
.sec3head {
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  height: 240px;
  text-align: center;
  border: px solid red;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  border-radius: 10px;
}

.sec3head4 {
  /*     pic     */
  display: inline-block;
  width: 30%;
  height: 200px;
  text-align: center;
  border: 1px solid red;
  color: #FFF;
  border-radius: 5px;
  vertical-align:top;
}

.sec3head5 {
  /*      text     */
  display: inline-block;
  width: 60%;
  height: 200px;
  align-content: start;
  text-align: center;
  border: px solid red;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  border-radius: 10px;
  vertical-align:top;
}

答案 1 :(得分：-2)

您应该使用float: right;或float: left;放置DOM块元素。

.sec3head {
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  height: 240px;
  text-align: center;
  border: px solid red;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  border-radius: 10px;
}

.sec3head4 {
  /*     pic     */
  display: inline-block;
  width: 30%;
  height: 200px;
  text-align: center;
  border: 1px solid red;
  color: #FFF;
  border-radius: 5px;
}

.sec3head5 {
  /*      text     */
  display: inline-block;
  width: 60%;
  height: 200px;
  float: right;
  align-content: start;
  text-align: center;
  border: px solid red;
  background: rgba(0, 0, 0, 0.5);
  color: #FFF;
  border-radius: 10px;
}
<div class="sec3head">
  <div class="sec3head4">
    <img src="images/" alt="alt text" height="100%" width="100%" />
  </div>
  <!--sec3headt4-->
  <div class="sec3head5">
    text
  </div>
  <!--sec3headt5-->
</div>
<!--sec3head-->
<div class="sec3head">
  <div class="sec3head5">
    text
  </div>
  <!--sec3headt5-->
  <div class="sec3head4">
    <img src="images/" alt="alt text" height="100%" width="100%" />
  </div>
  <!--sec3headt4-->

</div>
<!--sec3head-->
<div class="sec3head">
  <div class="sec3head4">
    <img src="data:image/jpeg;base64,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"
      alt="alt text" height="100%" width="100%" />
  </div>
  <!--sec3headt4-->




  <div class="sec3head5">
    text
  </div>
  <!--sec3headt5-->
</div>
<!--sec3head-->

相关问题
最新问题