如何让图片与左侧的段落集对齐/转到右侧？答案

【问题标题】：How to get picture to align with the left set of paragraphs/go to right of?如何让图片与左侧的段落集对齐/转到右侧？
【发布时间】：2015-07-17 13:51:30
【问题描述】：

这是我正在尝试实现的原型

这是我目前拥有的： JsFiddle

我正在尝试让笔记本电脑上的人的图片与段落组件（商务旅行者、办公用品采购等）正确对齐并在其右侧...

我尝试的是使用Align 属性，将我的img src 代码更改为

<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />

但这没有任何效果。我也尝试过Float，但这搞砸了我的利润和左侧组件的组织。

有没有办法做到这一点而不浮动？

【问题讨论】：

是this 你想要什么？

标签： html css user-interface frontend user-experience

【解决方案1】：

见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 的高度和宽度。我只是大致做了。

【讨论】：

像@webcodecs 所说的那样使用table/cols 更好吗？
@committedandroider 使用 div 结构比使用 table 更好。检查jsfiddle.net/uggopbhk/7
我不认为为此使用表格不是一个好主意..我认为@webcodecs 建议使用双列布局，其中第一列包含导航，第二列包含图片。
是的，我的意思是带有浮动 div 的 2 列布局。请不要使用表格进行布局。
@ketan 这更像是一个概念问题，但我知道高度和宽度与块元素相关，在这种情况下是 div。你是如何让包含笔记本电脑图片的 div 拉伸到这么多的？我看到您使用了垂直对齐，但只设置了垂直对齐 - w3schools.com/cssref/pr_pos_vertical-align.asp

【解决方案2】：

您必须创建两列。第一列是菜单，第二列是图像。如果你这样做，你不会有漂浮的问题。

【讨论】：