如何將文本與圖像對齊？

-1

我想將文本與this project中的圖像對齊，就好像我正在使用文本編輯器（like this）一樣。我試過如何將文本與圖像對齊？

<img src:"image.jpg" align="top">

但它只做第一行。

來源

2016-02-26 Federico Chiesa

可能重複的[如何使用HTML/CSS將圖片包裹在圖片周圍]（http://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using -html-CSS）。 – showdev

讓圖像float:left

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Arvo', serif; 
 
} 
 

 
div#wrapper { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    padding-top:56px; 
 
    box-sizing:border-box; 
 
} 
 

 
div#header { 
 
    position:fixed; 
 
    top: 0; 
 
    height: 60px; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 48px; 
 
    width: 100%; 
 
    background-color: rgba(0, 79, 113, 1); 
 
} 
 

 
div#sidebar { 
 
    width: 178px; 
 
    float: left; 
 
    min-height: 100%; 
 
    padding: 20px 20px 0px 0px; 
 
    text-align: right; 
 
    color: white; 
 
    height: 100%; 
 
    width: 6%; 
 
    background-color: rgba(100, 147, 167, 1); 
 
} 
 

 
div#content { 
 
    margin-left: 178px; 
 
    min-height: 100%; 
 
    padding:75px; 
 
} 
 

 
li { 
 
    list-style-position: inside; 
 
    list-style-type: none; 
 
    line-height: 30px 
 
} 
 

 
a{ 
 
    color:white; 
 
    text-decoration: none; 
 
} 
 

 
img.spaced{ 
 
    float:left; 
 
    margin: 5px; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo"> 
 
    <link rel="stylesheet" type="text/css" href="../css/main.css"> 
 
    <meta charset="UTF-8"> 
 
    <title>Home Page</title> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="header"> 
 
     Home 
 
    </div> 
 
    <div id="sidebar"> 
 
     <ul> 
 
     <li><a href="../html/link.html">Link</a></li> 
 
     <li><a href="../html/link.html">Link</a></li> 
 
     <li><a href="../html/link.html">Link</a></li> 
 
     </ul> 
 
    </div> 
 
    <div id="content"> 
 
     <img class="spaced" src="http://i.imgur.com/HNj6tRD.jpg" style="width:60px; height:85px"><div class="bigletter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-02-26 21:57:45

div#content { 
    font-size: 0; 
    margin-left: 178px; 
    min-height: 100%; 
    padding:75px; 
} 
img.spaced{ 
    padding:0px 10px 10px 0px; 
    box-sizing: border-box; 
    vertical-align: middle; 
    display: inline-block; 
    width: 12%; 
} 
.bigletter { 
    display: inline-block; 
    font-size: 16px; 
    vertical-align: middle; 
    width: 88%; 
}

上#content的font-size: 0擺脫引起的HTML新線條和空間的空白。你應該給他們display: inline-block，你可以擺脫填充img.spaced，或者你可以給它box-sizing: border-box像在這個例子中。 box-sizing: border-box導致填充向內而不是向外推。這裏是一個CodePen

來源

2016-02-26 22:33:39

如何將文本與圖像對齊？

回答

相關問題