4

この結果を達成したい

ここに画像の説明を入力してください

このようなチュートリアルはたくさんありますが、固定されたテキストと列で機能します。この方法で、2列のレイアウト内に可変長のテキストを印刷します

#cols {
column-count: 2;
column-gap: 20px;
}
<div id="box">
  <p id="cols">
    Lorem Ipsum....
  </p>
</div>

だから私はそのようなテクニックを使うことができません、どうすればこのシナリオの真ん中に画像を置くことができますか?

4

1 に答える 1

4

ここにいます:
http://jsfiddle.net/aX47K/

CSS:

.column{  
   width:300px;  
   float:left;  
   margin-right:20px;  
} 

.column div{  
  width:200px;  
  height:210px;  
}

#col-1 div{
  float:right;
}
#col-2 div{
 float:left;
} 

img#center-image{  
  position:absolute;  
  left:110px;
}
于 2012-06-19T12:06:11.713 に答える