如何在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中正確對齊圖像和文本？

回答

相關問題