如何在html中正确对齐图像和文本？

我在正确对齐我的html代码时遇到了很多困难。我正在建立一个网站，我有一个页面展示我的项目。我需要将图像放在左侧，文字放在右侧。但是，我希望在图像和描述图像的文本之间留出一些空间。我还希望限制文本在开始输入新行之前的行进距离。现在，文字继续，在最后跳到下一行之前填满整条水平线。这里是我的代码：如何在html中正确对齐图像和文本？

<style> 

    a { 
     color: #404040; 
    } 

    .bg-1 { 
     background-color: #6DBDD6; 
     color: #ffffff; 
    } 

    .container-fluid { 
     padding-top: 80px; 
     padding-bottom: 80px; 

    } 

    .img-1 { 
     float: left; 
     margin-left: 100px; 
    } 

    </style> 



<div class="container-fluid bg-1"> 
    <div class="row"> 
    <div class="col-sm-4"> 
     <a href=""><img src="" class="img-1" height="281" width="388.9" alt="git"></a> 
    </div> 
    <div class="col-sm-8"> 
     <h2>Project Name</h2> 
     <p>Created using java, this application allows for blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p> 

     <a href="">Click here to view full code!</a> 
    </div> 
    </div> 
    </div>

来源

2016-07-28 JimBobCooter

请提供的jsfiddle和/或截至目前为止您所拥有的内容以及您想要的另一个粗略草图。 –

下面是它现在所做的一个截图：http://imgur.com/a/fKdu8。请注意，图像旁边的文字以及文字如何继续显示，直到屏幕右侧的边缘。我想知道如何定制这两个功能。 – JimBobCooter

先不使用col-sm-类图像的标签和文本，因为它被定义为引导列。

使用额外的标记在一个col-sm

<div class="col-sm-8"> 
    <img class="theimg" src="blah.jpg"/> 
    <div class="parag">sdadasd</div> 
</div>

然后你可以浮动子元素left

.col-sm-8 .theimg, 
    .col-sm-8 .parag { 
    float:left; 
    margin:2px; 
    }

这里是JsFiddle

来源

2016-07-28 22:55:39

对不起al_kasih_empatix，但这对我没有任何帮助。它将文本一直拍到屏幕的右侧。 – JimBobCooter

看看这个：https://jsfiddle.net/Klaudia/wp3Lzj4y/2/ –

是的我已经在原帖中看到了。它仍然不能帮助我自定义图像和段落之间的距离。 – JimBobCooter

如何在html中正确对齐图像和文本？

回答

相关问题