CSSテクスチャと画像整列％

Question

私はCSS初心者です... どうやってこのような整列を行うことができますか？おかげ

<div id="sys-wrap"> 
    <img src="image.png"> 
    <p>Long message texte</p> 
</div> 

#sys-wrap {}  
#sys-wrap p { 
    border: 1px solid #ffffff; 
    float:left; 
    margin: 15px; 
    width: 691px; 
} 
#sys-wrap img { 
    border: 1px solid #ffffff; 
    float: left; 
    margin: 15px 15px 15px 100px; 
    vertical-align: top; 
} 

...私は多くの事をしようとしたが、私は私が必要なものを得ることはありません...だからあなたは任意のコードのアイデアを持っている場合、私はちょうどそれを描きます！

Answer 1

私はバイオリンを作りました。これはあなたのために働きますか？

https://jsfiddle.net/hnf8jou4/3/

HTML：

<div> 
    <div id="left"> 
    <img src="http://lorempixel.com/400/200" id="inner"> 
    </div> 
    <div id="right"></div> 
</div> 

CSS：

#left { 
    width:25%; 
    height:200px; 
    float: left; 
    background-color:#f00; 
} 

#right { 
    width:75%; 
    height:200px; 
    background-color:#0f0; 
} 
#inner { 
    display:block; 
    width:100px; 
    margin-left: auto; 
    margin-right: 0; 
    background-color: #00f; 
} 

Answer 2

あなたが達成しようとしているまさに本当に不明です。しかし、私は図面を見て以来、私はこれが必要なものだと思った。 Uは折り返しのためにdivを持ち、float: rightを右に追加する必要がありますdiv。他のものは％とパディングの高さで再生しているだけです。あなたのCSSファイルの内部#sys-wrap imgについては

https://jsfiddle.net/hnf8jou4/4/

Answer 3

、float: right;を追加し、margin

15pxの新しいCSSは次のようになります、

#sys-wrap img { 
    width: 50px; 
    height: 50px; 
    border: 1px solid #ffffff; 
    float: right; 
    margin: 15px; 
} 

また、それは親の与えますコンテナの設定幅と高さ：

#sys-wrap { 
    width: 150px; 
    height: 150px; 
    background: red; // just to make it pretty 
} 

ちょっとfyiと同じように、指定された要素のdisplayがtable-cellでない限り、vertical-alignは機能しません。

:-)ここでフィドルです：https://jsfiddle.net/d2ae3ub3/