0

我的 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>
4

7 回答 7

1

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

显示：内联块

于 2013-06-28T11:33:16.767 回答
1

试试这个

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

将 div 包裹在具有特定宽度的菜单和内容周围，然后确保与边距和填充一起添加的菜单和内容是该宽度也可能很有用。

div.wrap { width 800px}
div.content {width:640px}
于 2013-06-28T11:34:47.433 回答
1

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

于 2013-06-28T11:35:46.450 回答
1 
 div.content
    {
    width:calc(100% - 160px);
    float:right;



    }

这应该工作

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

于 2013-06-28T11:38:56.953 回答
0

小提琴 

 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>
于 2013-06-28T11:34:43.593 回答
0

做起来很简单

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

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

于 2013-06-28T11:51:04.283 回答
0

删除 float: right 并添加边距 - http://jsfiddle.net/xEGRg/

div.content {
  margin-left: 230px;
}
于 2013-06-28T12:48:40.103 回答