宽度足够的时候元素还是被挤下去了

Question

效果图

---

html

<div class="service">
    <div class="ser_title"></div>
    <!-- ser_title -->
    <div class="ser_content">
        <div class="ser_left li">
            <div class="ser_item">
                <img src="images/ser_web_ic.png">
                <h1>Web Design &amp; Development</h1>
                <span>ISAMA Pvt. Ltd. designs and develops creative websites utilizing the latest technologies.</span>
            </div>
        </div>
        <!-- ser_left -->
        <img src="images/service_bg2.jpg" class="ser_pic">
        <div class="ser_right ri">
            <div class="ser_item">
                <img src="images/ser_mob_ic.png">
                <h1>Mobile Applications</h1>
                <span>Our Developers helps you to Design, Develop &amp; Distribute Mobile Applications - Smarter &amp; Faster.</span>
            </div>
        </div>
        <!-- ser_right -->
    </div>
    <!-- ser_content -->
</div>
<!-- service -->

---

css

.service{
    height: 950px;
    width: 1400px;
    margin: 0 auto;
}
.ser_title img,.ser_item img{
    float: left;
    padding-right: 35px;
    padding-bottom: 70px;
    text-align: center;
    vertical-align: middle;
}
.ser_content{
    margin: 0 auto;
    width: 1400px;
}
.ser_left{
    margin-left: 140px;
}
.ser_pic{
    margin:80px 40px 0px;
}
.ser_item{
    height: 90px;
    margin-top: 100px;
    width: 500px;
}

---

为啥出来的效果是这样的

右侧的div整个都在下面

Answer 1

是图片没有设置浮动，自己解决了

Answer 2

float 浮动先把宽度调小吧，这个明显是被挤下去的

Answer 3

本来觉得这个问题我应该能解决，但看到你的问题就不想看下去了。
题主，这个问题其实就是两个块不能水平显示，你可以只把框架贴上来，而不是贴上所有的代码。把问题一股脑抛出来自己什么都不做，这不是一个好习惯。以后你若写几百行的代码，遇到问题就都贴出来问人，是没有人愿意帮你解答的。