どのように次の他のdivタグに1個の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; 

    }

このように書き

enter image description here

は、あなたができる画像で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の質問にタグ付けする必要があります現代のブラウザと広く（しかししばしば）使われていませんが、IE8などのクラップスブラウザです。 – 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

のおかげで、あなたはまた、親にclearfixを適用する必要があります。 – 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タグに1個のdivタグを作るために

答えて

関連する問題