Html div中的空间太大

发布于04月06日

我试着按如下方式制作两列，但是，我无法更改左div的空格.

.half50 {
  width: 50%;
  display: table-cell;
  height: fit-content;
  align-content: flex-start;
}

<div class="half50" style="margin: 1px; border: solid 1px;background: red; height: 50px;">
  <h2> CONTACT INFORMATION </h2>
  <p>
    Department of Mathematics <br> University of xx <br> xx. <br>
    <strong>Office:</strong> xx
    <strong>E-mail:</strong> <code>xx</code> <br>
  </p>
</div>

<div class="half50">
  <p>
    <img src="https://images.unsplash.com/photo-1583433713740-6b3f35a3d232?      crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTIyMjEwNw&ixlib=rb-1.2.1&q=85" alt="wave2" width="400" height="150">
  </p>

Use the modern `flexbox` layout mode for this:

避免使用内联样式，try 将样式与标记分开
避免设置导致元素溢出的明确高度

body {
  display: flex;
}

.contact {
  margin: 1px;
  border: solid 1px;
  background: red;
  /* height: 50px; Avoid setting explicit heights like this */
}

<div class="contact">
  <h2>CONTACT INFORMATION</h2>
  <p>
    Department of Mathematics <br> University of xx <br> xx. <br>
    <strong>Office:</strong> xx
    <strong>E-mail:</strong> <code>xx</code> <br>
  </p>
</div>
<div class="image">
  <p>
    <img src="https://images.unsplash.com/photo-1583433713740-6b3f35a3d232?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTIyMjEwNw&ixlib=rb-1.2.1&q=85" alt="wave2" width="400" height="150">
  </p>
</div>

当屏幕不够宽，无法让两个元素相邻时，你决定了会发生什么吗？

body {
  display: flex;
  /* If I can't fit my children on one line at the size they want to be, wrap onto a new line */
  flex-wrap: wrap;
}

.contact { 
  flex-grow: 1;
  /* Grow at a rate of 1 if there is room for me to do so */
  margin: 1px;
  border: solid 1px;
  background: red;
}

.image {
  min-width: 500px;
  flex-grow: 1;
}

img {
  width: 100%;
  height: auto;
}

<div class="contact">
  <h2>CONTACT INFORMATION</h2>
  <p>
    Department of Mathematics <br> University of xx <br> xx. <br>
    <strong>Office:</strong> xx
    <strong>E-mail:</strong> <code>xx</code> <br>
  </p>
</div>
<div class="image">
  <img src="https://images.unsplash.com/photo-1583433713740-6b3f35a3d232?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTIyMjEwNw&ixlib=rb-1.2.1&q=85" alt="wave2" width="400" height="150">
</div>