第二格不比第一格宽 [英] Second div no wider than first div

问题描述

我有这样的布局： https://postimg.org/image/74ioib3y7/

游戏规则如下：

1. 容器必须至少为210px宽和85px高


2. Row1应该能够扩大到需要的宽度，并且只有当容器和容器一样大时才包装文字


3. Row2必须与Row1一样宽=>当Row2的内容比Row1的内容宽时，它应该包装单词并且不拉伸容器

我已经设法做了除3之外的所有事情。

编辑： JSFiddle

  IGNORe必须要用它来粘贴JSFiddle 
  

请协助

解决方案

这应该解决您的请求：

  .container {display：inline-block;背景：aliceblue; min-width：210px; min-height：85px; position：relative;}。maxim {position：absolute;宽度：100％;最大宽度：100％; background-color：lime;}  

 < div class = 容器 > <报头GT; <强> 12345620< /强> <跨度>描述< /跨度> < /报头> < span class =maxim> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum< / span> < / DIV> < div class =container> <报头GT; <强> 1234567890< /强> < span>描述和更多文字在这里也是可能的< / span> < /报头> < span class =maxim> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum oposum< / span> < / DIV>  

I have this layout: https://postimg.org/image/74ioib3y7/

The rules of the game are:

1. The container must be at least 210px wide and 85px high
2. Row1 should be able to grow as wide as it needs to and wrap words only when the container is as big as its container
3. Row2 has to be as wide as Row1 => it should wrap words and not stretch the container when the content of Row2 is wider than the content of Row1

I have managed to do everything except 3.

EDIT: JSFiddle

IGNORe THIS MUST HAVE IT TO PASTE JSFiddle

Please help

解决方案

This should solve your request:

.container {
  display: inline-block;
  background: aliceblue;
  min-width: 210px;
  min-height: 85px;
  position: relative;
}

.maxim {
   position: absolute;
   width: 100%;
   max-width: 100%;
   background-color: lime;
}

<div class="container">
    <header>
        <strong>12345620</strong>
        <span>description</span>   
    </header>
    <span class="maxim">
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
    </span>    
</div>    
        
<div class="container">
    <header>
        <strong>1234567890</strong>
        <span>description and more text is here also possible</span>   
    </header>
    <span class="maxim">
        Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  oposum
    </span>    
</div> 

这篇关于第二格不比第一格宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！