堆疊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>

來源

2013-06-28 Chaitanya Gupta

請把它放在jfiddle – Gangadhar

只設置寬度到您的內容類 – Sharky

我@Sharky同意，你應該有一個寬度集。這是W3C標準的一部分，如果你不這樣做，你會看到奇怪的。爲您的資源：http://css.maxdesign.com.au/floatutorial/introduction.htm http://jsfiddle.net/ – killthrush

嘗試此

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

它也可能是有用的環繞菜單和內容一個div與spacific寬度，然後進行有邊距和填充加在一起肯定菜單和內容是寬度。

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

來源

2013-06-28 11:34:47 RiggsFolly

使用您的div的顯示屬性，這一切div一定水平疊加。

顯示：內聯塊

來源

2013-06-28 11:33:16

我知道這是一個答案。但這個瑣碎的事情可以作爲一個評論:( – madhairsilence

你怎麼在主要職位發表評論？ –

新用戶:(不能幫助！ – madhairsilence

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>

來源

2013-06-28 11:34:43

在CSS定義中使用display：inline-block，它應該爲您水平堆疊它們。

來源

2013-06-28 11:35:46

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



    }

這應該工作

這將使分度類菜單的左邊和內容DIV在右

來源

2013-06-28 11:38:56 Gangadhar

它很容易只是做

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

如果你想

讓它float:right只是給它的寬度，檢查我的小提琴http://jsfiddle.net/GafgA/1/

來源

2013-06-28 11:51:04 Raza

刪除浮動：權並添加保證金 - http://jsfiddle.net/xEGRg/

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

來源

2013-06-28 12:48:40

堆疊div彼此相鄰/水平

回答

相關問題