1

プロジェクトのレイアウト ビューを設計したいと考えています。レイアウト ビューの左隅に画像があり、右隅 (同じ行) には 2 行の単語があり、1 行目と 2 行目に 1 行あります。どうすればそれを実現できますか?

<body>
<div>
<img src = "image" alt ="Logo" height = "120" width = "170"/>
<div class = "r">Item 1.</div>
</div>
</body>

これまでのところ、左と右の 1 つのアイテムを実行できます。

<body>
<div>
<img src = "Image" alt ="Logo" height = "120" width = "170"/>
<div class = "r">Item 1.</div>
**<div class = "r">Item 2.</div>**
</div>
</body>

2 番目の項目を追加すると、画像の後の行に表示されます。私が望むのは、右側の両方の線が左側の画像と同じ位置になることです。

私のcssファイルは次のようなものです

        .r 
        {
            float:right;
            width: 33%;
        }
        .l
        {
            float:left;
            width: 33%;
        }    
        .c 
        {
            text-align:center;
            width: 34%;
        }
4

1 に答える 1

0

この結果を試す

<div class="container">
 <div class="image">
    <img src = "image" alt ="Logo" height = "120" width = "170"/>
 </div>
 <div class="right">
    <p>1st line</p>
    <p>2nd line</p>
 </div>
</div>


 .container
 {
 display:inline-block;
 background-color:blue;
 }
 .image
 {
  float:left;   
  height:120px;
  width:170px;
  background-color:red;
 }
 .right
 {
  float:left;
  width:300px;   
  height:120px;
  background-color:green;
 }
于 2013-05-31T03:41:25.457 に答える