Question

我想将文字与this project中的图片对齐，就好像我正在使用文本编辑器（like this）一样。我试过了

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

但它只是第一行。

Answer 1

让图片float:left

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

如何将文本与图像对齐？

2 个答案: