如何让图片对齐左边的paragraphs/go组到右边的?
How to get picture to align with the left set of paragraphs/go to right of?
这是我要实现的原型
这是我目前拥有的: JsFiddle
我正在尝试让笔记本电脑上的人的照片与段落组件(商务旅行者、办公用品采购等)正确对齐并位于其右侧...
我尝试使用 Align 属性,将我的 img src 代码更改为
<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />
但这没有任何效果。
我也试过 Float 但这弄乱了我的边距和我左边组件的组织。
有没有办法不用浮动就可以做到这一点?
您必须创建两列。第一列用于菜单,第二列用于图像。如果你这样做,你就不会漂浮了。
见fiddle
我用过的HTML和CSS如下。使用 float:left
HTML
<div class="container">
<div id="choices">
<p class="choice">Business Traveller</p>
<p class="choice">Office Supply Purchases</p>
<p class="choice">Stay at home parent</p>
<p class="choice">Entertainment</p>
<p class="choice">Profile 6</p>
</div>
<div class="image"></div>
</div>
CSS
html, body, .container {
height:100%;
}
#choices {
width:30%;
float:left;
}
.choice {
margin-top:0px;
margin-left:20px;
text-align:center;
width:100%;
background-image: url("http://i.imgur.com/H43sVoi.png");
padding-top:15px;
padding-bottom:15px;
}
.image {
height:100%;
width:65%;
background-color:red;
float:left;
}
您将不得不处理每个 div 的高度和宽度。我只是粗略地做了。
这是我要实现的原型
这是我目前拥有的: JsFiddle
我正在尝试让笔记本电脑上的人的照片与段落组件(商务旅行者、办公用品采购等)正确对齐并位于其右侧...
我尝试使用 Align 属性,将我的 img src 代码更改为
<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />
但这没有任何效果。 我也试过 Float 但这弄乱了我的边距和我左边组件的组织。
有没有办法不用浮动就可以做到这一点?
您必须创建两列。第一列用于菜单,第二列用于图像。如果你这样做,你就不会漂浮了。
见fiddle
我用过的HTML和CSS如下。使用 float:left
HTML
<div class="container">
<div id="choices">
<p class="choice">Business Traveller</p>
<p class="choice">Office Supply Purchases</p>
<p class="choice">Stay at home parent</p>
<p class="choice">Entertainment</p>
<p class="choice">Profile 6</p>
</div>
<div class="image"></div>
</div>
CSS
html, body, .container {
height:100%;
}
#choices {
width:30%;
float:left;
}
.choice {
margin-top:0px;
margin-left:20px;
text-align:center;
width:100%;
background-image: url("http://i.imgur.com/H43sVoi.png");
padding-top:15px;
padding-bottom:15px;
}
.image {
height:100%;
width:65%;
background-color:red;
float:left;
}
您将不得不处理每个 div 的高度和宽度。我只是粗略地做了。