当不是满行时,em中的条宽度变得太窄

时间:2018-04-12 12:36:00

标签: html css css3 drupal-7

我有一个业余爱好网站,有一个drupal 7,并且时不时地挣扎着这个:

我将文章宽度设置为max-width:35em;

它适用于大多数类似的文章,除了 - 一些文章 - 是诗歌/诗歌 - 意味着线宽从来不是满35em,但有40-50%...

发生了什么 - 整篇文章的宽度缩小到很窄......

我预计 - 它仍然是35分钟,并留下白线结尾,但我找不到一个简单的解决方案......

(也 - 我不想设置最小宽度或宽度,因为左边有另一个块,它会在浏览器调整大小时设置螺丝)

更新: 我正在添加小提琴: 1.使用长文本https://jsfiddle.net/3kef5923/24/

确定

.ds-2col-stacked{}

.node{display: block;
float: right;
margin-bottom: 20px;
font-size: 1.125em;
margin-top: -.75em;}

.ds-2col-stacked > .group-header{}
.ds-2col-stacked > .group-right
{padding-left: 15em;
width: 100%;
max-width: 34.722em;}

.ds-2col-stacked > .group-left
{float: left;
max-width: 15em;}
<div class="ds-2col-stacked node">

<div class="group-header">

</div>
<div class="group-left">
<p>
some short text here Left
</p>
</div>

<div class="group-right">
<p>
some Long text here right some Long text here right some Long text here right some Long text here right some Long text here right some Long text here right some Long text here right
</p>
</div>

</div>

  1. 未通过简短文字https://jsfiddle.net/vsexzzt4/5/
  2. .ds-2col-stacked{}
    
    .node{display: block;
    float: right;
    margin-bottom: 20px;
    font-size: 1.125em;
    margin-top: -.75em;}
    
    .ds-2col-stacked > .group-header{}
    .ds-2col-stacked > .group-right
    {padding-left: 15em;
    width: 100%;
    max-width: 34.722em;}
    
    .ds-2col-stacked > .group-left
    {float: left;
    max-width: 15em;}
    <div class="ds-2col-stacked node">
    
    <div class="group-header">
    
    </div>
    <div class="group-left">
    <p>
    some short text here Left
    </p>
    </div>
    
    <div class="group-right">
    <p>
    some Long text 
    </p>
    </div>
    
    </div>

0 个答案:

没有答案