0

さて、これがケースです。固定幅の画像と可変幅の 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>
4

2 に答える 2

0

何時間ものグーグルとハッキングの後、すべての主要なブラウザーで機能するソリューションを見つけました。ここにコードペンがあります 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;
    }
  }
}
于 2012-12-19T15:05:40.007 に答える
0

画像を左に浮かせて、余白を与えてみてください。これにより、画像が左側に固定され、p が右側に移動します。

于 2012-06-08T10:52:39.133 に答える