Question

我有一堆div，里面有一个内容div。在内容div中有3个元素，h1，p和span，所有左对齐。我想要发生的是以下几点：

内容div应垂直和水平居中
内容div应与h1中的文字或span中的文字一样宽（以较长者为准），如果高于max-width这些应该包裹
p应该是内容div的75％，但不会对内容div的大小产生影响（有效率为h1或span的75％，以较长者为准）

但是我遇到了以下问题：

问题1：拥有一个较长的p元素会导致内容div扩展到max-width，无论h1或{{1}的大小}}。我已经尝试使用绝对定位来解决这个问题，但它会破坏div的垂直居中
问题2：长span元素会留下一个空白，其中单词突破2行，使内容div不会显示为居中

请参阅下面的代码段，了解我的目标以及出现的问题，边框只是为了帮助您了解正在发生的事情。

有没有人知道这是怎么回事？我想坚持使用CSS，因为这些需要响应，尽管如果有一个简单的JS / jQuery解决方案，它将被考虑。

编辑：为了澄清我在此之后的视觉效果，这是为什么示例好或坏。我还添加了删除边框的功能，以展示我的意思是以视觉为中心：

1）好：内容div适合h1的宽度，看起来居中，没有边框作为h1左右相等的空格

2）好：内容div适合h1的宽度，因为它比span长，看起来居中，没有边框作为h1左右相等的空格

问题1：

3）错误：span正在扩展内容div的宽度，看起来向右移动没有边框，因为右边比左边更多。如果p没有扩展div并且保持在宽度的75％，那么这将不会发生

4）改进3但仍然很糟糕：在各种SO问题中找到的潜在修复显示绝对定位会阻止p扩展内容div，但现在它不是流程的一部分，它会扰乱垂直居中

问题2：

5）错：这里的问题是p元素，因为它现在比它分成2行的h1更长。但是第一行的末尾和div的max-width之间的额外空间是保留的，所以当删除边框时它看起来不居中，因为右边的空间比{{1}的左边多。 }

6）修复5但不是解决方案：手动断开线（使用max-width）可以实现我需要的外观，因为h1未扩展到<br>所以看起来没有边界的中心。这在实际应用中是不可行的，因为div的宽度可以变化

Alternative JSFiddle Link

h1

max-width

function toggleBorders() {
  $('h1, p, span').toggleClass('bordered');
  $('.content').toggleClass('content-bordered');
}

Answer 1

您的问题非常有趣。我通过将description设置为与max-width相同来解决了min-width的div扩展问题。然后它无法扩展。

我无法弄清白色空间和标题的问题。它看起来像我的中心。

这是我得到的：

＆＃13;

.box-holder {
  display: flex;
  flex-flow: row wrap;
}

.box {
  flex: 1 0 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  border: 1px solid blue;
}

.content {
  min-width: 50%;
  max-width: 50%;
  border: 1px solid red;
}

h1,
p,
span {
  border: 1px solid green;
}

p {
  width: 75%;
}

.abs {
  position: absolute;
}

＆＃13;

<div class="box-holder">
  <div class="box">
    <div class="content">
      <h1>1. Example Title</h1>
      <p>Good Example</p>
      <span>Link</span>
    </div>
  </div>
  <div class="box">
    <div class="content">
      <h1>2. Title</h1>
      <p>Min Width Good Example</p>
      <span>Link</span>
    </div>
  </div>
  <div class="box">
    <div class="content">
      <h1>3. Example Title</h1>
      <p>When the description gets too long then it DOESN'T expand the content div</p>
      <span>Link</span>
    </div>
  </div>
  <div class="box">
    <div class="content">
      <h1>4. Example Title Size</h1>
      <p class="abs">Setting absolute position avoids expansion but messes up the vertical layout</p>
      <span class="abs">Link</span>
    </div>
  </div>
  <div class="box">
    <div class="content">
      <h1>5. Also Long Titles Leave White Space</h1>
      <p>This does look centered</p>
      <span>Link</span>
    </div>
  </div>
</div>

＆＃13;

我希望它有所帮助，这就是你正在寻找的东西。

修改

使用text-align: justify;
解决5

＆＃13;
＆＃13;
.box-holder { display: flex; flex-flow: row wrap; } .box { flex: 1 0 350px; display: flex; align-items: center; justify-content: center; height: 350px; border: 1px solid blue; } .content { min-width: 50%; max-width: 50%; border: 1px solid red; } h1, p, span { border: 1px solid green; } p { width: 75%; } .abs { position: absolute; } /*NEW CSS:*/ h1 { text-align: justify; }
＆＃13;
<div class="box-holder"> <div class="box"> <div class="content"> <h1>1. Example Title</h1> <p>Good Example</p> <span>Link</span> </div> </div> <div class="box"> <div class="content"> <h1>2. Title</h1> <p>Min Width Good Example</p> <span>Link</span> </div> </div> <div class="box"> <div class="content"> <h1>3. Example Title</h1> <p>When the description gets too long then it DOESN'T expand the content div</p> <span>Link</span> </div> </div> <div class="box"> <div class="content"> <h1>4. Example Title Size</h1> <p class="abs">Setting absolute position avoids expansion but messes up the vertical layout</p> <span class="abs">Link</span> </div> </div> <div class="box"> <div class="content"> <h1>5. Also Long Don't Titles Leave White Space</h1> <p>This does look centered</p> <span>Link</span> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

Div扩展到某些内容的大小

1 个答案: