CSS texte和圖像alignement在％

我是一個真正的初學者在CSS ... 你知道我該怎麼做這種排列？我嘗試了很多事情，但我沒有得到我所需要的。所以我只畫它，如果您有任何代碼的想法......CSS texte和圖像alignement在％

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

謝謝！

Screenshot

來源

2016-12-12 Incoming

這是一個有點不清楚你在問什麼。你是否想要將圖像對齊到右側並將文字包裹起來？ – hungerstar

我做了一個小提琴。這對你有用嗎？

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

來源

2016-12-12 21:39:44

這看起來很不錯，但是右邊的段落文字在圖片下方，因爲有很多文字。如何讓文本留在您設置的綠色div中？ – Incoming

我們非常接近。我需要爲「正確」ID添加一些右邊距或右邊距的空間......但是我設置的代碼不起作用。它忽略了我的保證金權利和填充權......任何想法？ -EDIT-通過添加額外的div upper和padding global來解決。謝謝你的幫助！完善！ – Incoming

這是真的不清楚你想達到什麼。但是，既然我看到你製作的圖畫，我想這就是你需要的。你需要有一個div的換行，並在右邊div加float: right。其他的事情只是用％和填充來玩高度。

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

來源

2016-12-12 21:56:27 Denisx

爲#sys-wrap img你的CSS文件裏，添加float: right;和15px

您新的CSS的margin應類似於此：

#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，vertical-align不起作用，除非指定的元素有display的table-cell。 :-)

這裏有一個小提琴：https://jsfiddle.net/d2ae3ub3/

來源

2016-12-12 22:00:35

CSS texte和圖像alignement在％

回答

相關問題