如何讓一個div標籤其他div標籤旁邊

enter image description here 如何讓一個div標籤其他div標籤旁邊

我的CSS文件是這樣的

@charset "utf-8"; 
/* CSS Document */ 


#test 
{ background:#0CF; 
    text-align:right; 
    margin-top:0px; 
    margin-left:735px; 
    width:200px; 
    margin-top:inherit; 

    } 

    #text 
{ 
    background:#C6C; 
    text-align:left; 
    margin-right:203px; 
    margin-top:-18px; 
    } 

     .main 
{ background:#396 
    text-align:left; 
    margin-top:150px; 
    margin-left:20px; 
    margin-right:40px; 
    position:fixed; 
    border: 1px solid; 
    } 

.container 
{ 

    background:#CCC; 
    padding-top: 2px; 
    padding-right: 10px; 
    padding-bottom: 10px; 
    padding-left: 10px; 
    margin-right:20px; 
    width:299px; 
    height:270px; 
    border: 1px solid; 
    margin-top:-74px; 

    bottom:100px; 
    right:5px; 

    }

這是HTML文件

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test</title> 

<link rel="stylesheet" href="prat.css"> 

</head> 

<body> 
<div class="main"> 
<div id="text"> 
    <p>Thankyou for taking the time to visit our website. 

This site exists primarily for existing clients to access updates on current investments they have with us and for Marketwise Investments to provide new opportunities as they arise. 

If you are a prospective client, please read on to learn more about MarketWise Investments and the work we do. 

MarketWise Investments is a Sydney-based development and property investment company with a diverse range of projects across Australia and overseas. 
</p> 
</div> 
<div id="test"> 
<p>We offer professional, efficient investment.and development strategies for clients in both domestic and international markets, looking for cash-positive property investments where possible.</p> 
</div> 
<span class="container"> 
<p>We offer professional, efficient investment and development strategies for clients in both domestic and international markets, looking for cash-positive property investments where possible. 

All projects are carefully considered and aligned with market demand to maximize the best possible returns for our clients.</p> 
</span> 
</div> 


cross browser 
grade 
box model 

</body> 
</html>

在圖片中，你可以看到一個div標籤不在另一個旁邊。我想把它放在最前面。我用 - 來嘗試保證金。但沒有工作。有人可以幫我

來源

2011-10-25 Nubkadiya

如果你高興地收到答案，只有工作，你應該只標記以'css3'你的CSS問題現代的瀏覽器和（經常）沒有廣泛使用，但IE瀏覽器如廢話的瀏覽器。 – thirtydot

既然你標記了這個css3，我會給你css3的答案。

<body> 
    <div id="box1">1</div> 
    <div id="box2">2</div> 
    <div id="box3">3</div> 
</body>

（使用供應商前綴）

body{ 
    display: box; 
    box-orient: horizontal; 
}

見http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

而且http://jsfiddle.net/4eqve/

來源

2011-10-25 23:46:56 Petah

我認爲我在做不同版本的CSS。但我正在搜索Box模型。所以謝謝你的 – Nubkadiya

兩個div的使用float:left

來源

2011-10-25 23:47:35

你還需要將父母應用到父母身上。 – chovy

CSS：

#box1 { 
    float: left; 
    width: 80%; 
    height: 100px; 
    background:#0CF; 
    } 

#box2 { 
    float: right; 
    width: 20%; 
    height: 100px; 
    background:#C6C; 
    }

HTML：

<section id="box_wrap"> 
    <div id="box1">1</div> 
    <div id="box2">2</div> 
</section>

結果：http://jsfiddle.net/j3ffz/pDjEj/

來源

2011-10-25 23:58:59 j3ffz

使用某些帶有填充/邊距的元素時會中斷。 – Petah

如何讓一個div標籤其他div標籤旁邊

回答

相關問題