CSS/HTML - 使文本去周圍的圖像

我在網頁上有一個形象，我想文本開始旁邊的圖像確實在那裏，但走在圖像周圍，如果文本長度變過去的形象，文字會在圖片下面出現......就像您在Microsoft Word中創建的圖片「緊」並將其放在一個段落中一樣。我是新來的HTML和CSS ...我試過style = "display:inline"，但似乎沒有工作。有人可以幫幫我嗎？CSS/HTML - 使文本去周圍的圖像

我的HTML（編輯出的圖像URL）：

<body> 
    <div class = "main"> 
     <div class ="picture"> 
      <img src = "..." alt = "picture" style="width:180px;height:240px"> 
     <p style='display:inline;'>This is the <b>HOME</b> page</p> 
     </div> 
    </div> 
    </body>

我的CSS：

body { 
    } 

    .main { 
    } 
    .main .picture { 
     padding-top: 15px; 
     padding-left: 5px; 

     text-align: left; 
    } 
    .main .info{ 
    }

來源

2015-04-04 user3369494

您可能要添加浮動：左圖像屬性：

body { 
    } 

    .main { 
    } 
    .main .picture { 
     padding-top: 15px; 
     padding-left: 5px; 
     text-align: left; 
    } 
    .main .info{ 
    } 

    .main img { 
     float: left; 
}

http://jsfiddle.net/u29yk98r/1/

來源

2015-04-04 10:21:28 Bladepianist

謝謝！這幫了很大的忙！ – user3369494 2015-04-06 18:39:48

我想你對搜索float: left;。
這將任何元素設置爲向右或向左。

這是你要找的嗎？

.image { 
 
    width: 150px; 
 
    height: 100px; 
 
    border: 5px solid black; 
 
    float: left; 
 
}

<main> 
 
    <div class="image"></div> 
 
    <span>Lorem ipsum dollar si amet, lorem ipsum dollar si amet, lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,lorem ipsum dollar si amet,</span> 
 
</main>

來源

2015-04-04 10:18:05 Persijn

謝謝，這幫了很多！ – user3369494 2015-04-06 18:40:02

<html><head><style> 

body { 
    } 

    .main { 
    } 
    .main .picture { 
     padding-top: 15px; 
     padding-left: 5px; 
     float:left; 
     text-align: left; 
    } 
    .main .info{ 
    } 
</style> 

</head><body> 
    <div class="main"> 
     <div class="picture"> 
      <img src="..." alt="picture" style="width:180px;height:240px"> 
     <p style="display:inline;float: right;width: 500px;">This is the <b>HOME</b> page</p> 
     </div> 
    </div> 
    </body></html>

希望這樣可以解決你的問題

來源

2015-04-04 10:27:16

CSS/HTML - 使文本去周圍的圖像

回答

相關問題