如何使图片与左边一组段落对齐/向右转？
如何使图片与左边一组段落对齐/向右转？
提问于 2015-05-07 06:29:14
这是我正在尝试实现的一个原型
下面是我目前拥有的内容：JsFiddle
我试图得到的照片，在笔记本电脑上的人正确地对齐与正确的段落组件-商务旅行者，办公用品采购，等等。
我尝试的是使用对齐属性，将img代码更改为
<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />但那没有任何效果。我也尝试过浮动，但这给我的边距和左边组件的组织带来了混乱。
有什么办法不让我浮起来吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-05-07 06:35:35
见小提琴
我使用过的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的高度和宽度。我只是粗略地做到了。
Stack Overflow用户
发布于 2015-05-07 06:35:16
您必须创建两列。1列用于菜单，第2列用于图像。如果你这样做，你就不会有浮起来的困难。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30093467
复制相关文章
相似问题
腾讯云开发者
