How to get picture to align with the left set of paragraphs/go to right of?(如何让图片与左侧的段落集对齐/转到右侧?)
问题描述
这是我正在尝试实现的原型
这是我目前拥有的: 属性,更改我的 img src 代码到
但这没有任何效果.我也试过 Float 但这搞砸了我的利润以及我左侧组件的组织.
有没有办法做到这一点而不浮动?
见fiddle
我使用的 HTML 和 CSS 如下.使用 float:left
HTML
<div class="container"><div id="选择"><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%;}#选择{宽度:30%;向左飘浮;}.选择 {边距顶部:0px;左边距:20px;文本对齐:居中;宽度:100%;背景图片:url(http://i.imgur.com/H43sVoi.png");填充顶部:15px;填充底部: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.
这篇关于如何让图片与左侧的段落集对齐/转到右侧?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何让图片与左侧的段落集对齐/转到右侧?
基础教程推荐
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01