Question

我试图获得＆＃34;我们是谁＆＃34;图像左侧的部分。然而，＆＃34;与团队见面＆＃34;部分不断突然出现在那里。另外，我不知道为什么，但是＆＃34;会见团队＆＃34;部分分成两半;一个段落位于图像旁边，另一个位于＆＃34; Who Are We＆＃34;部分。

小提琴：http://jsfiddle.net/ur080dmL/

HTML

<img src="http://i.imgur.com/Z9V9vWz.jpg" width="312" height="274" class="alignright">
<div class="team-bio alignleft">
  <h2>Who Are We?</h2>
  <p>Company Name is lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
  <p>Company Name is lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
  <p>Company Name is lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</div>

<div class="single-bios">
  <h2>Meet the Team</h2>
  <div class="james-bio">James is 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.</div>
  <div class="jason-bio">Jason is 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.</div>
</div>

CSS

.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}

.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}

Answer 1

.alignleft  {

display: inline;
margin-right: 1.5em;    
}

请试试这个。希望对你有帮助。

Answer 2

在这种情况下，绝对不需要使用float：left。如果你完全取出浮动：左边问题应该修复。

使用alignleft格式化段落，对齐

2 个答案: