孩子宽度添加到父内容

我不是肯定的什么写标题，但我的jsfiddle应该让一切都非常清楚。孩子宽度添加到父内容

<div class="blabla"> 
    Bla bla bla blalblabl bla bla bla bla bla 
    <div class="questionMark">?</div> 
</div>

如果我使输出窗口小，那里的问号落入2号线有一个甜蜜点，但布拉布拉在1号线的逗留。

如何避免这种互动？我看到的右侧为问号2个可能的解决方案，第一一个具有“保留”的宽度。这样，如果文本来自右边缘40个像素以内，它会将其放下。

第二，更好的解决方案是不上右侧的保留宽度。在这种情况下，最后一行上面的行可以使用全宽，并且在结束之前不会换行40px。在这种情况下，页面将不得不“检测”问号跳过线条，并在它自己的内容下添加一个空行。

我已经尝试了一些东西，但不能得到任何的这些工作，我想要的。

来源

2016-05-19 McCuz

把问号* *前文源：https://jsfiddle.net/1btr7mkq/1/ –

或添加清除浮动：https：//jsfiddle.net/1btr7mkq/2/ –

谢谢！我有一种感觉，我错过了明显的东西。 – McCuz

只要把DIV问号在容器DIV的开始。在与float: right结合，这将始终把图像中的容器的右上角，并允许左浮动文本和它下面：

<div class="blabla"> 
    <div class="questionMark">?</div> 
    Bla bla bla blalblabl bla bla bla bla bla 
</div>

https://jsfiddle.net/5cysbv5h/

来源

2016-05-19 11:32:19 Johannes

-Areü在寻找这一点，如果是，则只是删除浮动：权并添加显示：内联 - 然后问号的总是会来问完成

来源

2016-05-19 11:30:03

我确实希望问号与盒子右侧对齐。关于我的问题的2条评论帮助解决了它。感谢您的回复！ – McCuz

后，这也正是为什么flexbox有被创建。

.title { 
 
    display:flex; 
 
    background:beige; 
 
    } 
 
.blabla{ 
 
    flex-shrink:1; 
 
    flex-grow:1; 
 
    } 
 
.questionMark{ 
 
    background:blue; 
 
    color:white; 
 
    border-radius:10px; 
 
}

<div class="title"> 
 
    <div class="blabla">Bla blabla bla</div> 
 
    <div class="questionMark">?</div> 
 
</div>

flex-grow允许如果可用的元素使用更多的空间。
flex-shrink允许;如果不可用的元素，使用更少的空间。

来源

2016-05-19 11:31:56 SteeveDroz

这是你想要的吗？ demo

.questionMark{ 
    background-color: blue; 
    border-radius: 100px; 
    display:inline-block; 
    color: white; 
    padding: 0 8px; 
    cursor:pointer; 
}

来源

2016-05-19 11:33:44 Era

的位置也可能有所帮助 – Era

.blabla{ 
     border: 1px solid #888; 
     background-color:#ffffef; 
     border-top-left-radius: 10px; 
     border-top-right-radius: 10px; 
     font-size: 2em; 
     padding: 3px 30px; 
     position:relative; 
     padding-right:50px; 
    } 
.questionMark{ 
     background-color: blue; 
     border-radius: 100px; 
     clear: both; 
     color: white; 
     padding: 0 8px; 
     cursor:pointer; 
     position:absolute; 
     right:20px; 
    top:3px; 
    }

这会为你工作

来源

2016-05-19 11:47:09

孩子宽度添加到父内容

回答

相关问题