0

CSS に問題があります。:) ボックスを次のようにスタイルしたいと思います: http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910 (チャート + 3 ボックス右)。

今私は試しました：

.wktcontent {
   float: left;
   width: 80%;
}
.wktinfo {
   float: right;
   width: 20%; 
}
.wkttitle {
   height:34px;
   padding:5px;
   border-bottom:1px solid #000000;
   margin-bottom:20px;
}

.wktinfocontent {
  font-weight:bold;
  border-top:1px dashed #000000;
}

そしてhtmlで：

<div class="wktcontent">
  <center><h2>Title</h2></center>
  <p><h3>Content</h3></p>
</div>
<div class="wktinfo">
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
  <div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
</div>

すべてがうまく調和していると思います。しかし、定義してボックスに境界線を追加するとすぐに

border: 1px solid lightblue;

タイトルは右側の情報の上に配置されます。

質問の 2 番目の部分は次のとおりです。右側の数字 (ドリブルの例のように) をその隣のテキストに揃えるにはどうすればよいですか?

どうもありがとうございます！！

4

2 に答える 2

0

境界線を追加すると、要素の寸法が変更されます。要素に 1 ピクセルの境界線を追加する場合は、幅と高さから 1 ピクセルを削除します。これを行わないと、レイアウトの問題が発生します。

于 2013-07-28T10:21:55.213 に答える
0

jsfiddle と chrome でエラーを再現できませんでした。使用しているブラウザを教えてください。

数字に関してはtable、各 div で a を使用して、両方の半分を適切に配置できるようにすることをお勧めします。次のようなもの：

<div class="wktinfocontent">
  <table>
    <tr>
      <td width="30%">
      07
      </td>
      <td width="70%">
      Hours play game today
      </td>
    </tr>
  </table>
</div>
于 2013-07-28T10:33:54.667 に答える