如何將徽標和文字放在同一行中？

什麼是CSS代碼的HTML對齊有標誌和文字在同一行......它必須在下面的圖形顯示所示..如何將徽標和文字放在同一行中？

HTML: 

    <div class="top_left"> 
    <div class="header"> 
    <img src="https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-small/inline/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" alt="logo"/>    <br/> 
    </div> 
    <h2 id="site-title"><a>GOOGLE</a> 
    <div id="site-description">SEARCH ENGINE </div> 
    </h2> 
    </div>

來源

2017-02-20 Pradeep

讓我們瞭解您已經嘗試使我們可以幫助你。我們不能假設和爲你寫代碼:) – Aslam

可以使用遵循html/css組合：

/* CSS */ 
 

 
.container-div { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 250px; 
 
    height: 150px; 
 
} 
 

 
.img-div { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 45%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.img-div img { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 5%; 
 
    width: 90%; 
 
    height: 50%; 
 
    border: 1px solid red; 
 
} 
 

 
.img-placeholder { 
 
    position: absolute; 
 
    top: 7.5%; 
 
    left: 15%; 
 
} 
 

 
.text-div { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 50%; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
    overflow: auto; 
 
}

<!-- HTML --> 
 

 
<div class="container-div"> 
 

 
    <div class="img-div"> 
 
    <img /> 
 
    <p class="img-placeholder"> 
 
     Image Goes Here 
 
    </p> 
 
    </div> 
 

 
    <div class="text-div"> 
 
    
 
    <h2> 
 
     Texty-text 
 
    </h2> 
 
    
 
    <p> 
 
     Sub-texty-text 
 
    </p> 
 
    
 
    </div> 
 
    
 
</div>

來源

2017-02-20 09:48:12 BFG

使用此代碼

<p><img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg" alt="imag" style="height: 50px;width: 50px;"><span>kiran</span></p>

來源

2017-02-20 09:29:39 KiranPurbey

你好儘量使徽標和容器中的文本，並用浮動幾個格，會做的工作，如果我是正確的這樣

我不知道，但是這將有助於

來源

2017-02-20 09:30:54

您可以使用（在H4的元素，因爲它們在默認情況下塊）

display: inline-block;

或者你可以浮動的元素向左/ rght

float: left;

只是不要忘了清除浮動後

clear: left;

來源

2017-02-20 09:31:48

嘗試是這樣的

<div class="container"> 
    <div id="logo"> 
     <img src="http://placehold.it/150x100"> 
    </div> 
    <div id="text"> 
     <h2>Hello</h2> 
     <h3>World</h3> 
    </div> 
</div>

CSS：

.container > div { 
    display: inline-block; 
    padding: 5px; 
} 

#logo, #text { 
    float: left; 
}

這裏的fiddle

來源

2017-02-20 09:32:23

感謝您的答案@Effe ... – Pradeep

如何將徽標和文字放在同一行中？

回答

相關問題