布局HTML CSS图片和标题

-3

<h2> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;" /> WELCOME WELCOME WELCOME 
 
    <br> Welcome Welcome Welcome 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" " /> 
 
</h2>

最重要的部分是布点

来源

2017-04-12 keronconk

如果您将提供您的努力和代码示例以实现您希望人们在这里可以更好地帮助您。 :) – Chirag

您可以通过以下方式轻松实现。

<div style="width: 90px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
 
</div> 
 

 
<div style="width: 400px; display: inline-block; color:#F0E68C"> 
 
    <h2 style="text-shadow: 3px 3px 10px black; font-style: italic;"> 
 
    WELCOME WELCOME WELCOME 
 
    <br > 
 
<div style= " margin-left:50px;"> 
 
    Welcome Welcome Welcome 
 
</div></h2> 
 
</div> 
 

 
<div style="width: 90px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
 
</div>

希望它能帮助。

来源

2017-04-12 05:28:50 Chirag

您需要将CSS添加到您的标记。请检查下面的片段并根据您的需要进行编辑。

h2{ 
 
    display: inline; 
 
} 
 
h4{ 
 
    margin-left: 150px; 
 
}

<img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
 

 
<h2>WELCOME WELCOME WELCOME</h2> 
 
     
 

 
     <img src="https://i.stack.imgur.com/am4hM.png" alt=""/> 
 
<h4> Welcome Welcome Welcome</h4>

来源

2017-04-12 05:05:39 DragonBorn

有相当多的错误的代码片断您提供，你所希望的。虽然我认为这将是一个好主意，让更多的深入与你的问题，并详细说明你已经尝试什么，你的要求，还有一些作品，我们可以

Div的工作是CSS元素有助于分割内容。当涉及到布局时，它们非常有用。在你的案例中使用三个div可能是有意义的。每个图标一个，文本另一个。

<div> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
</div> 

<div> 
    WELCOME WELCOME WELCOME 
    <br> 
    welcome welcome welcome 
</div> 

<div> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
</div>

但是这仍然看起来很糟糕吧？对。我们需要告诉这些divs的行为，也许有些对齐？

这个怎么样：

<div style="width: 100px; display: inline-block"> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
</div> 

<div style="width: 100px; display: inline-block"> 
    WELCOME WELCOME WELCOME 
    <br> 
    welcome welcome welcome 
</div> 

<div style="width: 100px; display: inline-block"> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
</div>

好一点..但宽度都错了！更改中间的div为400px ..它越来越好！让我们添加这些标题和一些颜色。

<div style="width: 100px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
 
</div> 
 

 
<div style="width: 500px; display: inline-block; color:#F0E68C"> 
 
    <h2> 
 
    WELCOME WELCOME WELCOME 
 
    <br> 
 
    welcome welcome welcome 
 
    </h2> 
 
</div> 
 

 
<div style="width: 100px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
 
</div>

八九不离十！ theres仍然有一些工作，但你需要阴影，更好的字体，居中的文字。获取浏览谷歌，你会立即解决它！也许甚至为你的造型制作一个独立的文件！

来源

2017-04-12 05:12:42 Scheme

布局HTML CSS图片和标题

回答

相关问题