如何获取图片以使其与左侧的段落对齐/转到右侧? [英] How to get picture to align with the left set of paragraphs/go to right of?

问题描述

这是我要实现的原型

这是我目前拥有的内容:属性，更改了我的img src代码到

 < img id =笔记本电脑" align ="middle" src ="zoom-39988392-3.JPG" height ="90" width ="90"/> 

但是没有任何效果.我还尝试了 Float ，但是这弄乱了我的利润以及我的左手部分的组织.

有没有一种方法可以使我不漂浮呢?

解决方案

请参见小提琴

我使用的HTML和CSS如下.二手的 float:left

HTML

 < div class ="container">< div id ="choices">< p class ="choice">《商务旅行者》</p>< p class ="choice">办公用品购买</p>< p class ="choice">待在家里的父母</p>< p class ="choice">娱乐</p>< p class ="choice">配置文件6</p></div>< div class ="image"></div></div> 

CSS

  html，body，.container {高度:100％;}#choices {宽度:30％;向左飘浮;}.选择 {margin-top:0px;左边距:20px;text-align:center;宽度:100％;背景图片:url("http://i.imgur.com/H43sVoi.png");padding-top:15px;padding-bottom:15px;}.图像 {高度:100％;宽度:65％;背景颜色:红色；向左飘浮;} 

您将不得不处理每个div的高度和宽度.我只是粗略地做了.

Here is a prototype of what I am trying to implement

Here is what I currently have : JsFiddle

I am trying to get the picture of the guy on the laptop to align correctly with and to the right of the paragraph components - Business Traveller, Office Supply Purchases, etc...

What I've tried is using Align attribute, changing my img src code to

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

but that didn't have any effect. I also tried Float but that messed up my margins and the organization of my left components.

Is there a way I can do this without floating?

解决方案

See the fiddle

The HTML and CSS that i've used is as follows. Used 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;
}

You will have to work with the height and width of each divs. I just made it roughly.

这篇关于如何获取图片以使其与左侧的段落对齐/转到右侧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！