2017-02-27 5 views
-2

私はHTMLコードを書く方法についていくつかの助けが必要です。現在、私は別のhtmlファイル(この場合は "faq_contact.html")からのものをアップロードするdivで、 "main.html"というhtmlファイルを1つ持っています。 enter image description here1つのdivで2つの/ tree divを区切っていますか?

私は、「連絡先ネスプレッソ」及びその下の2つのものを持つトップボックスを使用する場合:

どのように私はネスプレッソは、このページに持っているものに類似した構造を得るためにHTMLを構築することができます。 "inspect page source"というコードを試してみましたが、何かを見つけることができました。

+1

私は他の同様の質問を見てみましたが、その解決策は何とか私の問題のために動作しませんでした。 – GossetStudent

+2

あなたのこれまでのことを私たちに教えてください。私たちが手助けするのは簡単でしょう。 – Aslam

答えて

1

%の幅を両方のdivに加算して、合計が100未満になるようにします。float 1つのdivを左側に、もう一方を右側に追加します。

#heading { 
 
    background-color: #ddd; 
 
} 
 

 
#main-div { 
 
    background-color: #eee; 
 
    float:left; 
 
} 
 

 
#side-div { 
 
    background-color: #ccc; 
 
    float:right; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
} 
 

 
.col-75 { 
 
    width: 75%; 
 
} 
 

 
.col-20 { 
 
    width: 20%; 
 
}
<div class="row" id="heading">HEADING</div> 
 
<br> 
 
<div class="col-75" id="main-div">Main Div</div> 
 
<div class="col-20" id="side-div">Side Div</div>

0

コンテンツが別々のファイルにある場合は、次のように、アイフレームを使用することができます:あなたがコンテンツを生成し、あなたができるTwitterのブートストラップを使用して満足しているしている場合

<div> 
    <h1>Contact Nespresso</h1> 
</div> 
<iframe src="~/leftcontent.html" style="float:left; width:75%"></iframe> 
<iframe src="~/rightcontent.html" style="float:right; width:25%"></iframe> 

<div class="col-md-12"> 
    <h1>Contact Nespresso</h1> 
</div> 
<div class="col-md-8">left content</div> 
<div class="col-md-4">right content</div> 

いずれの場合も&は実際にインラインCSSを使用すべきではないスタイリングを追加する必要があります。

あなたは古い学校に行くことを望んでいた場合は、テーブルを使用することができますが:

<table> 
    <tr> 
     <td colspan="2"> 
      <h1>Contact Nespresso</h1> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 75%;">left content</td> 
     <td style="width: 25%;">right content</td> 
    </tr> 
</table> 

しかし、これ、本当に、その応答しないとしてこれを行うための推奨される方法はイマイチ。

1

divを作成し、外側のdivの内側に3 divを含みます。次に、最初の内側にはdivと100%の高さを割り当て、他の2つの内側には高さを50%に設定しました。最初にdivdisplay: inlinewidth: 70%に設定し、さらにdivを左に浮かべて、divdisplay: inline-blockと設定し、他の2つの幅を最初に隣接するように設定しましたdiv。以下のコードをご覧ください。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
    .example { 
 
\t width: 100%; 
 
    } 
 
    .span-full-height { 
 
\t  display: inline; 
 
     height: 100%; 
 
     float: left; 
 
     width: 70%; 
 
     border-right: 0.5px solid black; 
 
     padding: 10px; 
 
    } 
 
    .span-half-height { 
 
\t  display: inline-block; 
 
     height: 50%; 
 
     width: 25%; 
 
     border-bottom: 0.5px solid black; 
 
     padding: 3px; 
 
    } 
 
    .span-half-height-2 { 
 
\t  display: inline-block; 
 
     height: 50%; 
 
     width: 25%; 
 
     padding: 3px; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="example"> 
 
\t <div class="span-full-height"> 
 
    \t <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
 
    </div> 
 
    <div class="span-half-height"> 
 
    \t <p>Hello World</p> 
 
     <p>How are you?</p> 
 
    </div> 
 
    <div class="span-half-height-2"> 
 
    \t <p>Contact: 00000000</p> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

関連する問題