css - CSS浮动固定和流体在同一行

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

。苗条的

.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;
    }
  }
}