Question

好的就是这种情况。我有一个固定宽度的图像和2个宽度可变的文本字符串。

我希望2个内联内容范围保留在他们的专栏中，但我提出的解决方案无效。

<div class="fluid-container">
  <img class="fixed-width" src="x.png">

  <p class="dynamic-width">
    <span class="inline-content">Some&nbsp;content</span> 
    <span class="inline-content-2">Some&nbsp;content</span>  
  </p>  
</div>

Answer 1

尝试将图像浮动并为其留出一些余量。这将固定左侧的图像，p将向右移动。

Answer 2

经过数小时的谷歌搜索和黑客攻击后，我发现了一个适用于所有主流浏览器的解决方案。这是codepen http://codepen.io/lajlev/pen/mzgkw

.slim

.fillout-container
  input.left type="button" value="Filter reviews"
  .fillout
    input type="text" placeholder="Start typing"

.scss

body {
  max-width: 480px;
  margin: 40px auto;
  box-sizing: border-box;
  background: #efefef;
}

// Fillout technique
.left {
  float:left;
}

.fillout-container {
    padding: 20px;  
    background: #fff;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

  .fillout {
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    padding-left: 10px;

    > input, > div {
      width: 100%;   
      box-sizing: border-box;
    }
  }
}

CSS Float固定并且在同一行中流畅

2 个答案: