2 wb940318 wb940318 于 2016.05.05 11:37 提问

网页div不同行显示,是因为什么

就是这个网站首页下面一个红色框合并到上面的大红色框图片说明

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{dede:global.cfg_enwebname/}</title>
<link href="{dede:global.cfg_templeturl/}/hs/encss/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{dede:global.cfg_templeturl/}/hs/js/jquery.js"></script>    
<script src="{dede:global.cfg_templeturl/}/hs/js/fun.js" type="text/javascript"></script>   
<script src="{dede:global.cfg_templeturl/}/hs/js/ad.js" type="text/javascript"></script>    
<script src="{dede:global.cfg_templeturl/}/hs/js/window.js" type="text/javascript"></script>    
<script src="{dede:global.cfg_templeturl/}/hs/js/kxbdMarquee.js" type="text/javascript"></script>
            <script type="text/javascript">
    $(function(){
        $('#anlilist').kxbdMarquee({direction:'left'});
    });
</script>
<!--[if lte IE 6]>
<script src="{dede:global.cfg_templeturl/}/hs/js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix('div, ul, img, li, input , a, h2, span, p');
    </script>
<![endif]--> 
</head>
<body>

{dede:include filename="header.htm"/}
<div class="blank"></div><div class="blank"></div>
<!--    <div style="clear:both; overflow:hidden; height:358px; width:100%;background:url('/templets/hs/images/liangce.png') center;">-->

    <div class="main" > 
        <div class="prouducts">         
            <h2><p>Prouducts</p></h2>
            <div class="blank"></div>
            <div class="newsad">
                <div class="ad" >
                         <ul class="slider" >
                        {dede:arclist  typeid='193' row='4' titlelen='12'} 
                            <li><img src="[field:litpic/]"  width="240px" height="196px"/></li>
                                                  {/dede:arclist}
                          </ul>
                    <ul class="num" >
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </div>
            </div>  
        </div>
        <style>#anlilist {
    height: 170px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 500px;
}
#anlilist li {
    display: inline;
    float: left;
    height: 170px;
    margin: 0 7px;
    overflow: hidden;
    width: 165px;
}
#anlilist li p {
    height: 148px;
    overflow: hidden;
    width: 165px;
}
#anlilist li p img {
    height: 148px;
    width: 165px;
}
#anlilist li h3 {
    font-size: 12px;
    font-weight: normal;
    height: 22px;
    line-height: 22px;
    padding-top: 4px;
    text-align: center;
    width: 165px;
}</style>

                <div class="news">
            <h2><p class="curr">News Center</p></h2>
            <div class="blank"></div>
            <div class="news-list">
                <ul>
                        {dede:arclist  typeid='99' row='7' titlelen='50'} 
                        <li><span>[field:pubdate function="MyDate('y-m-d',@me)"/]</span><a href="[field:arcurl/]"  title="[field:title/]">[field:title/]</a>
                        </li>
                     {/dede:arclist}
                </ul>
            </div>
        </div>
                        <div class="news2">
            <h2><p class="curr">Contact Us</p></h2>
            <div class="blank"></div>
        <!--    <div class="news-list">-->
                <ul>
                     {dede:mylang eid='encontact' /}
                </ul>
    <!--        </div>-->
        </div>
        <div class="about">
            <h2><p>Viedo Center</p></h2>
            <div class="blank"></div>
            <div class="about-cen">
            <a href="#" onclick="window.open('http://cloud.video.taobao.com/play/u/2153292369/p/1/e/1/t/10300/fv/102/21305655.swf','','width:430;height=380;top=0;left:350;border=0;')"><IMG style='width:100%;height:100%;' border=0 SRC="/uploads/yhsp.png"></a>
            </div>
        </div>

        <div class="clear"></div>
        <div class="lanmu">
            <ul>
                <li>
                    <p><a href="/plus/list.php?tid=99"><img src="{dede:global.cfg_templeturl/}/hs/enimages/emp-01.jpg" alt=" "></a></p>
                </li>
                <li>
                    <p><a href="/plus/list.php?tid=200"><img src="{dede:global.cfg_templeturl/}/hs/enimages/emp-02.jpg" alt=" "></a></p>
                </li>
                <li>
                    <p><a href="/plus/list.php?tid=202"><img src="{dede:global.cfg_templeturl/}/hs/enimages/emp-03.jpg" alt=" "></a></p>
                </li>
                <li>
                    <p><a href="/plus/enbbs.php"><img src="{dede:global.cfg_templeturl/}/hs/enimages/emp-04.jpg" alt=" "></a></p>
                </li>
                <li>
                    <p><a href="/plus/list.php?tid=96"><img src="{dede:global.cfg_templeturl/}/hs/enimages/emp-05.jpg" alt=" "></a></p>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="facebook">
            <h2><p>facebook page</p></h2>
            <div class="blank"></div>
            <div class="facebook-page">
                <iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; width:270px; height:250px" src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/yhcut/&width=270&height=250&colorscheme=light&show_faces=true&border_color&stream=false&header=false">
                </iframe>
            </div>

        </div>
    </div>

</div>
{dede:include filename="footer.htm"/}
</body>
</html>

3个回答

CSDNXIAON
CSDNXIAON   2016.05.05 11:42

div 同行显示
div 同行显示
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

foreveryoumydearwife
foreveryoumydearwife   2016.05.05 11:55

div是块元素,元素前后会自动增加换行。如果想要实现div元素前后不换行,可以使用

 display:inline

,让他作为内联元素显示。

wb940318
wb940318 我应该在哪里改,这是网站后台的index.htm里的代码,我想加个facebook主页插件
大约 2 年之前 回复
niaonao
niaonao   Rxr 2016.05.05 22:47

div 是块状元素,默认换行。
用 span 可以将多个盒子放在同一行

第一个盒子
第二个盒子

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
div和其他标签不换行同行显示方法
在HTML中,让两个DIV在同一行显示,就是通过float属性来设置的,我们可以通过设置3个div,然后第一个div包裹住其他2个div,然后在设置宽高就可以了,我提交一段代码: DIV的同行测试 我是左边的固定测试文字 我是右边的固定测试文字
怎么让两个div并排同行显示
转:http://www.myexception.cn/web/1943020.html 如何让两个div并排同行显示 前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了。然后就测试了一下。下面是部分代码 自己测试 代码 DIV1 DIV2 效果 效果两个div的宽度相加是小于页
html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
01/23/2014, Posted in  移动 Comments: No comments 最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记先: 一、并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个
多个div同行显示
<br />1.<div>zhuzhu<div style="display: inline-block;">2010-3-2 12:11:34</div></div><br /> <br />2.<div>zhuzhu<div style="float:right;">2010-3-2 12:11:34</div></div><br /> <br />3.<div style="position:relative;">  <br />   <div id="1" style="position:absol
CSS/DIV:不用float实现块状元素/block/的同行排列
div是块状元素。所谓块状元素,就是默认一行只能有一个,不管这行后面有没有剩余的位置,第二个都会放到第二行。 一般让两个div放到一行的方法是做如下定义 #div1{display:inline; float:left;}其中,display:inline表示将其转换为内联元素,然后一行就可以放置多个了。float:left表示向左漂,所有的元素都会依次飘在左上方。 如果就是不想用f
如何让两个div并排同行显示
前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了。然后就测试了一下。下面是部分代码 自己测试 代码 DIV1 DIV2 效果 效果两个div的宽度相加是小于页面的宽度的,那么试验结果呢? 不成功,后来改成了左浮动,还是不成功。怎么办呢?还是上网查。。。 解决方案 不得不说有了网络这个无所
div 同行显示
第一第二第三 边距设定CSS边距属性 margin.D1{border:1px solid #FF0000;}.D2{border:1px solid gray;}.D3{margin:0.5cm 1cm 2.5cm 1.5cm;border:1px solid gray;}没有margin上面两个div没有设置边距属性(margin),仅设置了边框属性(border)。外面那个div
解决div与span等inline元素同行后高度不一致问题
这里场景是有一个div使用float,本来前面的span由于后面div的浮动被挤到了后面。这是因为浮动破坏了div的inline-box导致的。但是导致了,这两个元素的高度不一致的问题,并且无法用margin解决。即使用了vertical-align解决了小x的问题也没有什么反应,看来问题的原因不在这里,至于具体原因现在仍不是很清楚,网上找到了下面这样的代码得以解决。将div和span都table化
div中加入span右对齐后出现换行显示两种解决思路(同行显示,一个居中,一个靠右)
就类似说空间里面模块中模块名靠左,编辑字样出现在靠右,一般思路的话一定是认为通过分开两列,一个align=left,另一个align=right。后来我无意中发现有个东西叫,比如实现模块的效果就可以:文章编辑;当然我们还需要一个CSS文件去控制span的样式: .portlet span { float:right } 这个时候就发现出现一个问题“文章”跟“编辑”不在同一行中
块状元素、行内元素、行内块状元素同行换行显示以及float后的情况
Div、Span、Button、Input同行显示,给设置float属性,脱离文档流