Question

带有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>

Answer 1

使用此代码

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

Answer 2

你好试着为徽标和文本制作一个容器，并设置一个带浮动的div，如果我是正确的话就能完成这个工作像这样

<div class="name of class you made" //give jut a with>
  <div class="logo" //put float in this with a with>logo</div><div class="tekst" //put float in this with a with>tekst</div>
</div>

我不确定，但这会有所帮助

Answer 3

您可以使用（在h4元素上，因为它们默认是块）

display: inline-block;

或者你可以将元素浮动到左边/右边

float: left;

不要忘记在

之后清除花车

clear: left;

Answer 4

尝试这样的事情

<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

Answer 5

您可以使用以下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>

如何将徽标和文本放在同一行？

5 个答案: