[英]align image next to text
I am trying to display image and text like in this image http://i.imgur.com/qReaDlP.jpg . 我正在尝试显示此图像中的图像和文本http://i.imgur.com/qReaDlP.jpg 。 But I am facing 2 issues on my fiddle
但是我的小提琴面临2个问题
<section class="freedom_carousel">
<ul class="two-col">
<li class="pen">
<span class="icon-text"> <em>THis is </em> text text text</span>
</li>
<li class="phone">
<span class="icon-text"> <em>THis is </em> text text text</span>
</li>
<li class="arrow">
<span class="icon-text"> <em>THis is </em> text text text</span>
</li>
<li class="download">
<span class="icon-text"> <em>THis is </em> text text text text</span>
</li>
</ul>
</section>
Your styles required some serious reworking, take a look here: DEMO 您需要对样式进行认真的修改,请在此处查看: DEMO
<section class="freedom_carousel"> <!--Freedom section -->
<ul class="two-col left-col">
<li class="pen"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
<li class="phone"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
</ul>
<ul class="two-col right-col">
<li class="arrow"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
<li class="download"> <span class="icon-text"><em>THis is </em> text text text text text text text </span></li>
</ul>
</section>
.left-col, .right-col {
list-style: none;
width: 50%;
float: left;
margin: 0;
padding: 0;
}
.two-col li {
padding-left: 30px;
}
.two-col li.pen{
background: url("https://cdn2.iconfinder.com/data/icons/inverticons-stroke-vol-3/32/pen_write_edit_sketch_draw_compose-20.png");
background-repeat: no-repeat;
}
EDIT: Here is a sample media query for your mobile needs. 编辑:这是您的移动需求的示例媒体查询。 It is currently set to apple when the screen size is less than 450px wide (you can customize this to your needs): DEMO2
当前屏幕尺寸小于450像素(您可以根据需要自定义)时将其设置为Apple: DEMO2
@media (max-width:450px) {
.freedom_carousel ul.two-col li span.icon-text {
text-align: center;
}
.left-col, .right-col {
width: 100%;
}
.two-col li {
padding-left: 0px;
text-align: center;
padding-top: 50px;
}
.two-col li.pen, .two-col li.phone, .two-col li.arrow, .two-col li.download {
background-position: 50%;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.