Question

我需要开始以下部分开始＆＃34;我最喜欢的地方之一：我的主席沙发车可能！请务必访问我的Facebook页面。＆＃34;

重新插入图像旁边，边距为30像素我尝试了很多，但每次我这样做，不幸的是，结果变得扭曲了！

<h1>Misho the Boss</h1>
<p>Hi, I'm a cat. Meow!</p> 
<img src="Misho.jpg">
<h3>Some of my favorite places:</h3>
<ul>
  <li>My Chair</li>
  <li>The Couch</li>
  <li>The Car Maybe!</li>
</ul>
<p>Make sure to visit my <a href="http:\\www.facebook.com">facebook</a> page.</p>

CSS

body {
    background: lavenderblush;
}

h1 {
    font-family: Berkshire Swash;
}

p, li, h3 {
    font-family: Gloria Hallelujah;
}

h3 {
    font-size: 20px;
}

Answer 1

您可以将这些部分包装在div中，然后为每个部分指定一个百分比宽度。这样你可以根据需要调整百分比。

body {
    background: lavenderblush;
}

h1 {
    font-family: Berkshire Swash;
}

p, li, h3 {
    font-family: Gloria Hallelujah;
}

h3 {
    font-size: 20px;
}

.left, .right { width: 50%; display: inline-block; }

.left {
float: left;
}

<h1>Misho the Boss</h1>

<div class="left">
<p>Hi, I'm a cat. Meow!</p> 
<img src="Misho.jpg">
</div>
<div class="right">
<h3>Some of my favorite places:</h3>
<ul>
  <li>My Chair</li>
  <li>The Couch</li>
  <li>The Car Maybe!</li>
</ul>
<p>Make sure to visit my <a href="http:\\www.facebook.com">facebook</a> page.</p>
</div>

Answer 2

使用divs制作两列并为img添加边距，如下所示：

body {
background: lavenderblush;
}

h1 {
font-family: Berkshire Swash;
}

p, li, h3 {
font-family: Gloria Hallelujah;
}

h3 {
font-size: 20px;
}
.first-half, .second-half {width:50%;display:inline-block;}
.first-half {float:left;}
.space {margin-right:30px;}

 <div class="first-half">
 <h1>Misho the Boss</h1>
 <p>Hi, I'm a cat. Meow!</p> 
 <img src="Misho.jpg" class="space">
 </div>
 <div class="second-half">
 <h3>Some of my favorite places:</h3>
 <ul>
 <li>My Chair</li>
 <li>The Couch</li>
 <li>The Car Maybe!</li>
 </ul>
 <p>Make sure to visit my <a href="http:\\www.facebook.com">facebook</a> page.</p> 
 </div>

如何编辑此HTML＆amp; CSS代码实现那些要求？

2 个答案: