は本当に私は、Webデザインにクラスを取っている、と私は以下のレイアウトに似ている<code><div></code>タグを設定するには割り当てを持っているdivタグのヘルプ

が必要CodeacademyではHTMLとCSSが使用されていますが、私はしばらくそのスキルを使用していません。ここで私がこれまで持っているものです。は本当に私は、Webデザインにクラスを取っている、と私は以下のレイアウトに似ている<code><div></code>タグを設定するには割り当てを持っているdivタグのヘルプ

#banner { 
 
    width: 698px; 
 
    height: 71px; 
 
    background-color: #8B4789; 
 
    display: inline-block; 
 
} 
 
#button { 
 
    width: 306px; 
 
    height: 71px; 
 
    background-color: #ff7373; 
 
    display: inline-block; 
 
}

<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
 
    <title> 
 
    </title> 
 
</head> 
 

 
<body background="Website comp.png"> 
 
    <div id="banner"></div> 
 
    <div id="button"></div> 
 
</body> 
 

 
</html>

は残念ながら、私はこの時点で失わ少しだし、私が調査したものから、私が得ているアドバイスは、混合私を与えています必ずしも互いにうまく機能しないソリューションです。

指定されたレイアウトに似たようにコードを修正するにはどうすればよいですか？

出典

2016-05-23 Pondering Peridot

これは助けることができる：http://stackoverflow.com/questions/20566660を/ 3-column-layout-html-css – sinisake

あなたの質問は何ですか？ –

ようこそ！未来のための賢明な言葉：この質問の半分は重要ではない綿毛であり、ここに実際の質問があるかどうかは分かりません。私たちはあなたのクラスについて知る必要はなく、ストレスを感じています - これを外に出して肉に行きましょう。あなたはそのようにより良い答えを得るでしょう。それは、ノーマインドのコメントがあなたを正しい方向に向けると言われています。 – patricksweeney

非常に単純な解決策は、divを100％の部分で分割することです。すべての上部divの高さを同じ高さに設定します。

#banner{ 
    width:30%; 
    height:30px; 
    float:left; 
}

、私（15％）については、家庭（15％）のためのキャリア（15％）と教育（15％）同じことを行います。

その後、2行目も同じことをします。私はメイントピックとテキストのaparent divを作成することをお勧めします。

出典

2016-05-23 20:04:55

プラットフォームのブートストラップは、レイアウトを容易にするために画面を12列に分割し、nav-barやjumbo-tronのようなものにあらかじめ構築されたクラスを提供します。

あなただけのCDNとブートストラップリンク：あなたの頭の中で

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

とあなたの体はこのようなものになります。

<div id = navbar> 
    <div class = "row col-xs-12"> 
     <div class = col-xs-3> 
      Banner 
     </div> 
     <div class = col-xs-3> 
      Home 
     </div> 
     <div class = col-xs-3> 
      AboutMe 
     </div> 
     <div class = col-xs-3> 
      career 
     </div> 
     <div class = col-xs-3> 
      Schooling 
     </div> 
    </div> 
    <div class = "row col-xs-12"> 
     <div class = "col-xs-2"> 
      <div> 
       <a>mainoTopic</a> 
      </div> 
      <div> 
       <a>Text</a> 
      </div> 
     </div> 
     <div class = "col-xs-8"> 
      <div> 
       <a>Picture</a> 
      </div> 
     </div> 
     <div class = "col-xs-2"> 
      <div> 
       <a>Explaining</a> 
      </div> 
     </div> 
    </div> 
</div>

出典

2016-05-23 20:15:34 kpie

は本当に私は、Webデザインにクラスを取っている、と私は以下のレイアウトに似ている<code><div></code>タグを設定するには割り当てを持っているdivタグのヘルプ

答えて

関連する問題