圖像和浮動物體中的文字

對於你們大多數人來說，這將是一個簡單的問題，但我是新來的CSS。我的問題是我有兩個塊相互浮動，但第二個對象中的文本不會保持在同一行。我如何獲得同一行中的所有內容？圖像和浮動物體中的文字

它應該是什麼樣子： blocks 在現實中一切正常，直到「文本2」來或我試着調整「標識」填充，然後在「文本2」移動到下一行類似this。

另外如何獲得「徽標」旁邊的「Text2」？現在我只能用float：right，但我需要它更接近標誌。我是否使用作爲這些元素？謝謝。

添加JS的演示小提琴網址：http://www.jsfiddle.net/08rhr7wx/

HTML：

<aside> 
<div class="wrapper"> 
<div class="block1"> 
<h2>Text1</h2> 
</div> 
<div class="block2"><img src="img/logo.jpg"></div> 
<h2>Text2</h2> 
</div> 
</aside>

CSS：

.wrapper { 
    overflow: hidden; 
} 

.wrapper div { 
    height: 55px; 
    margin-top: 20px; 
} 

.wrapper .block1 { 
    float: left; 
    margin-left: 20px; 
    background: #390b5d; 
    width: 555px; 
} 

.wrapper .block1 h2 { 
    padding-left: 20px; 
    padding-top: 13px; 
} 

.wrapper .block2 { 
    float: left; 
    width: 325px; 
    background: #e26c34; 
    padding-left: 20px; 
} 

.wrapper .block2 h2 { 
    float: right; 
    padding-right: 20px; 
}

來源

2015-12-13 xantoo

'.wrapper .block2 h2' ?? h2不在你的'block2' div – Hareesh

我在block2裏面移動了你的「text2」，我猜你想要它。

此外，當您設置固定寬度時，您需要在wrapper上設置min-width以將這些浮點數保持爲1行。

爲了讓「text2」保持在您的徽標旁邊，我將其更改爲display: inline而不是其默認display: block。

注意：您真正應該嘗試的是重構您的代碼，使其更具響應性。

.wrapper { 
 
    min-width: 1000px; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper div { 
 
    height: 55px; 
 
    margin-top: 20px; 
 
} 
 

 
.wrapper .block1 { 
 
    float: left; 
 
    margin-left: 20px; 
 
    background: #390b5d; 
 
    width: 555px; 
 
} 
 

 
.wrapper .block1 h2 { 
 
    padding-left: 20px; 
 
} 
 

 
.wrapper .block2 { 
 
    float: left; 
 
    width: 325px; 
 
    background: #e26c34; 
 
    padding-left: 20px; 
 
} 
 

 
.wrapper .block2 h2 { 
 
    display: inline 
 
}

<aside> 
 
    <div class="wrapper"> 
 
    <div class="block1"> 
 
     <h2>Text1</h2> 
 
    </div> 
 
    <div class="block2"> 
 
     <img src="img/logo.jpg"> 
 
     <h2>Text2</h2> 
 
    </div> 
 
    </div> 
 
</aside>

按照要求，其中一些重組已經取得的第二樣品。

.wrapper { 
 
    min-width: 1000px; 
 
    overflow: hidden; 
 
} 
 

 
.wrapper div { 
 
    height: 55px; 
 
    margin-top: 20px; 
 
} 
 

 
.wrapper .block1 { 
 
    float: left; 
 
    margin-left: 20px; 
 
    background: #390b5d; 
 
    width: 555px; 
 
    line-height: 55px; 
 
} 
 

 
.wrapper .block1 span { 
 
    font-size: 24px; 
 
    padding-left: 20px; 
 
    color: white; 
 
} 
 

 
.wrapper .block2 { 
 
    float: left; 
 
    width: 325px; 
 
    background: #e26c34; 
 
    padding-left: 20px; 
 
    line-height: 55px; 
 
    vertical-align: middle; 
 
} 
 

 
.wrapper .block2 span { 
 
    font-size: 24px; 
 
    padding-left: 20px; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 

 
.wrapper .block2 img { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
}

<aside> 
 
    <div class="wrapper"> 
 
    <div class="block1"> 
 
     <span>Text1</span> 
 
    </div> 
 
    <div class="block2"> 
 
     <img src="http://lorempixel.com/30/30/technics/5/"><span>Text2</span> 
 
    </div> 
 
    </div> 
 
</aside>

來源

2015-12-13 18:23:03 LGSon

謝謝，我得到了文字，但我如何垂直居中標誌？如果我添加「padding-top」，那麼它會改變整個塊的高度並使其變大。此外，我在'.wrapper div {'中添加了'line-height：55px;'以獲得垂直居中的文本，但我不認爲它是真正居中的，我可以從底部添加一些額外的填充嗎？ – xantoo

@xantoo我會盡快爲我的答案添加一個示例。 – LGSon

我得到了文本填充工作，只是改變了行高數字，所以我留下了標誌居中。 – xantoo

嘗試增加H2標籤內.block2 <div class="block2"><img src="img/logo.jpg"><h2>Text2</h2></div>

編號：的jsfiddle .net/08rhr7wx/1/

來源

2015-12-13 18:14:18 Manivannan

圖像和浮動物體中的文字

回答

相關問題