Question

我的div不会彼此叠加

我该怎么办？一个div低于另一个。

我尝试了所有类型的定位甚至相对但它不起作用。

<head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <meta name="author" content="Chaitanya Gupta">

<meta name="keywords" content="Fashion, Learning, Resources ">
   <link href='http://fonts.googleapis.com/css?family=Luckiest+Guy&effect=3d-float' rel='stylesheet' type='text/css'>
   <link href='http://fonts.googleapis.com/css?family=Bad+Script&effect=3d-float' rel='stylesheet' type='text/css'>
   <link rel="icon" type="image/png" href="favicon.ico">
   <title>FLR</title>

CSS

 <style type="text/css">
        hr
        {
        color:white;
        border-width: 2px;
        border:medium silver dashed;
        }

        a:link,a:visited
        {
        display:block;
        color:white;
        }

        a:hover,a:active
        {
        background-color:#7C868E;
        text-decoration: underline;
        border-radius:8px
        }

        a
        {
        font-family: "Century Gothic";
        font-variant:small-caps;
        font-size: 20px;
        }

        #emboss 
        {
        border-right: 4px solid #2b2b2b;
        border-bottom: 4px solid #2b2b2b;
        }

        #subTopic
        {
        font-family: 'Luckiest Guy', cursive;
        font-size:60px;
        font-weight:lighter;;
        font-variant:small-caps;
        }

        #content
        {
        color:white;
        font-family: 'Bad Script', cursive;
        font-size:20px;
        }

        div.menu
        {
        background-color:#4A5662; 
        float:left; 
        width:150px; 
        height:210px; 
        border-radius:8px; 
        margin-top:20px; 
        margin-left:5px; 
        text-align:center; 
        padding-top:10px; 
        padding-bottom:10px
        }

        div.content
        {

        float:right;



        }


           </style>

    <script>

    </script>
</head>

HTML

<body background="denim.jpg">


   <img src="fas.jpg" style="float:right; height:80px; width:200px;">
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <hr>

   <div id="emboss" class="menu" >

   <a href="" onclick="displayAbout()">About</a></span>
   <br>
   <a href="" >Careers</a>
   <br>
   <a href="">Clients</a>
   <br>
   <a href="">Blogs</a>
   <br>
   <a href="">Contact Us</a>
   </div>

   <div class="content" id="display">
   <h1 id="subTopic" class="font-effect-3d-float">About</h1>

   <p id="content">FASHION LEARNING RESOURCES (FLR) is a Gurgaon, 
   India based small company pioneering Fashion Education & 
   Training Technology(FETT) products, services, consulting and 
   delivery services in FETT for the fashion institutes, 
   industry bodies and government. FLR also offers E learning 
   & multimedia content in Fashion / apparel Domain. 
   FLR is started by founding alumni batch of NIFT.</p>
   </div>

   <!--<hr style="position:absolute; bottom:30px; width: 1200px">
   <code style="color:white; position:absolute; bottom:10px">Copyright &copy 2013 Fashion Learning Resources. All rights reserved.</code>
-->

</body>

</html>

Answer 1

试试这个

div.content
{
   margin:0 0 0 160px;
}

以空间宽度包装菜单和内容div也可能很有用，然后确保菜单和内容与边距和填充一起添加就是那个宽度。

div.wrap { width 800px}
div.content {width:640px}

Answer 2

在CSS定义中使用display：inline-block，它应该为你水平堆叠它们。

Answer 3

 div.content
    {
    width:calc(100% - 160px);
    float:right;



    }

这应该有效

这将使div的类菜单保持在左侧，内容div保持在右侧

Answer 4

在div中使用display属性，所有带有此属性的div将水平堆叠。

display：inline-block

Answer 5

Fiddle

 div.menu
    {
    background-color:#4A5662; 

    height:210px; 
    border-radius:8px; 
    margin-top:20px; 
    margin-left:5px; 
    text-align:center; 
    padding-top:10px; 
    padding-bottom:10px
    }
div.menu a{
    display:inline-block;
}

并在每个锚点后删除<br/>标记

<div id="emboss" class="menu" >

   <a href="" onclick="displayAbout()">About</a></span>
   <a href="" >Careers</a>
   <a href="">Clients</a>
   <a href="">Blogs</a>
   <a href="">Contact Us</a>
   </div>

Answer 6

很容易做到

div.content
    {
    /*float:right;*/
    }

如果你想让它float:right给它宽度，请检查我的小提琴http://jsfiddle.net/GafgA/1/

Answer 7

删除浮动：向右并添加边距 - http://jsfiddle.net/xEGRg/

div.content {
  margin-left: 230px;
}

堆叠div彼此相邻/水平

7 个答案: