Как выровнять текст с изображением?

-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%; 
}

font-size: 0 на #content избавляется от пробела, вызванного новыми линиями и пробелы в HTML. Вы должны дать им display: inline-block, и вы можете либо избавиться от прокладки на img.spaced, либо вы можете дать ему box-sizing: border-box, как в примере. box-sizing: border-box заставляет прокладку двигаться внутрь, а не наружу. Вот CodePen

источник

2016-02-26 22:33:39

Как выровнять текст с изображением?

ответ

Смежные вопросы