html - div の 3 番目として 2 つのテキスト列と 1 つの画像

Question

一般に、Web ページには 3 つの領域があります (タイトルとサブタイトル、左側に 2 つのテキスト列とテスト、右側に画像)。次の結果を取得したいと思います。

ここに画像の説明を入力

作り方がわかりませんが、ワイン画像のz-indexと関係があると思いますが、どうすればいいですか？私はこれを持っています：

ここに画像の説明を入力

私の現在のコードは次のとおりです。

<header>
    <div class="inner-header">
      <h1><a title="title">titlw</a></h1>
      <h2>subtitle</h2>
    </div>
  </header>
  <section id="tagline">
    <div id="tagline-content">column 1 and its text.</div>
    <div id="tagline-content-middle">column 2 and its text.</div>
  </section>
  <section id="product">
     <article class="product">
      <img src="http://hmimexico.com/noir.png" alt="Girl" />
      <h3>title</h3>
      <p>Lorem Ipsum .</p>

    </article>
  </section>

CSS:

header {
  margin-top: -40px;
  height: 165px;
}

header .inner-header {
  height:165px;
  text-align:center;
}

header h1{
  padding-top: 45px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  margin-bottom:0;
}



header h2 {
  color:#111111;
  font-size: 19px;
  line-height: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top:-2px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
  text-transform:uppercase
}

#tagline {
  padding: 10px 0 10px 0;
  background:#111 ;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

#close-open-top {
  margin: -9px auto;
  text-align: center;
  width: 50px;
}

#close-open-top a {
  width:100px
}

#close-open-top:hover {
  margin-top:-11px;
  padding-bottom:2px
}

#tagline-content {
  color: #FFFFFF;
  text-align:left;  
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 100px;
  text-transform: uppercase;
}

#tagline-content-middle {
  color: #FFFFFF;
  text-align:center;  
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 100px;
  text-transform: uppercase;
}


#product {
  text-align:center;
  margin:16px auto;
  padding-top:10px;
  width:960px;
}

#product img {
  float: right;
  margin-left: 15px;
}

.product {
  width:100%;
  display:block;
  margin:0;
  text-align:left;
}

.product p {
  color: #4F4F4F;
  font-size: 16px;
  line-height: 21px;
  margin-bottom:38px
}

フィドルを見てください： http://jsfiddle.net/2aEGp/1/

画像 1 に示すような結果を得るにはどうすればよいですか?

score 2 · Accepted Answer

ここにあなたのイメージのためのフィドルがあります

これがcssとhtmlコードです

    <header>
    <div class="inner-header">
      <h1><a title="title">titlw</a></h1>
      <h2>subtitle</h2>
        <div class='imgCont'>
           <img src="http://i.stack.imgur.com/Ava65.png" alt="Girl" />
      </div>
    </div>

  </header>
  <section id="tagline">

    <div id="tagline-content">column 1 and its text.</div>
 <div id="tagline-content-middle">column 2 and its text.</div>

      </section>



<section id="product">
    <!-- Main content area -->
    <article class="product">

      <h3>title</h3>
      <p>Lorem Ipsum .</p>

    </article>
  </section>

CSS

header {
  margin-top: -40px;
  height: 165px;
}

header .inner-header {
  height:165px;
  text-align:center;
}

header h1{
  padding-top: 45px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
  margin-bottom:0;
}



header h2 {
  color:#111111;
  font-size: 19px;
  line-height: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top:-2px;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
  text-transform:uppercase
}

#tagline {
  padding: 10px 0 10px 0;
  background:#111 ;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.imgCont{
    height:100%;
    width:30%;
    float:right;
}

#close-open-top {
  margin: -9px auto;
  text-align: center;
  width: 50px;
}

#close-open-top a {
  width:100px
}

#close-open-top:hover {
  margin-top:-11px;
  padding-bottom:2px
}

#tagline-content {
  color: #FFFFFF;
  text-align:left;  
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 100px;
  text-transform: uppercase;
    width:100%;
}

#tagline-content-middle {
  color: #FFFFFF;
  text-align:center;  
  font-size: 10px;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 100px;
  text-transform: uppercase;
    width:100%;
}


#product {
  text-align:center;
  margin:16px auto;
  padding-top:10px;
  width:auto;
}

#product img {
  float: right;

}

.product {
  width:100%;
  display:block;
  margin:0;
  text-align:left;
}

.product p {
  color: #4F4F4F;
  font-size: 16px;
  line-height: 21px;
  margin-bottom:38px
}
.product img{
    position:relative;

}

少し反応が良くなるように、一部のデザインを % で調整しました。フィドルは iframe を使用しているため、ブラウザーで試すことができるため、実際のページとは応答性が少し異なります。

score 1 · Accepted Answer

これを達成するには、cssポジショニングを使用する必要があると思います。次の例を見てください。

http://jsfiddle.net/2aEGp/5/

これを実現するcssは次のとおりです

.product img {
    position: absolute;
    right: 50px;
    top: 100px;
}

このように製品セクションも再配置しました

<section id="product">
    <!-- Main content area -->
    <article class="product">
        <h3>title</h3>
        <p>Lorem Ipsum .</p>
        <img src="http://hmimexico.com/noir.png" alt="Girl" />
    </article>
</section>

score 1 · Accepted Answer

float:left上記の問題は、div に適用し#tagline-content、(空の div の 2 つの div の後) または(親 div に)の#tagline-content-middleいずれかを使用してフロートをクリアすることで解決できると思います。clear:bothoverflow:hidden

また、負の上部マージンまたは設定位置を絶対値として使用し、右側と上部の値を指定して、画像を適切な位置に配置することもできます (記事を保持position:relative;)

html - div の 3 番目として 2 つのテキスト列と 1 つの画像

CSS:

4 に答える 4

Related

Reference