0

コンテナ内にドラッグできるコンテナ内にブロックがあります。サイズ変更も可能です。デフォルトの位置は 7 div の横並びです。それらはすべてコンテナーの上部に配置する必要がありますが、代わりに、x 軸上で上下に表示されます。私はこれを理解することができず、助けていただければ幸いです。問題を示すjsFiddleと以下の html/css を次に示します。ありがとうございました。

#calCon {
          height:400px;
          width:700px;
          border:1px solid grey;
          margin:0px;
        }

.date   {
          width:98px;
          height:30px;
          border:1px solid blue;
          background-color:green;
          position:relative;
          top:0px;
        }

<div id = "calCon">
   <div class = "date" style = "left:0;">cell 0</div>
   <div class = "date" style = "left:100px;">cell 1</div>
   <div class = "date" style = "left:200px;">cell 2</div>
   <div class = "date" style = "left:300px;">cell 3</div>
   <div class = "date" style = "left:400px;">cell 4</div>
   <div class = "date" style = "left:500px;">cell 5</div>
   <div class = "date" style = "left:600px;">cell 6</div>
</div>
4

4 に答える 4

1

display: inline-block;日付クラスに追加

何をしようとしているのかよくわかりませんが、要素間の大きな白い間隔を意図していない場合は、左の位置を設定するインライン スタイル タグを削除するだけで、css でclassa を実行できます。float:left;

http://jsfiddle.net/4Bq4B/2/

于 2013-11-09T19:05:23.503 に答える
1

要素をコンテナ内に絶対配置する必要があります。

これはposition: relative、コンテナに設定することを意味します。そしてposition: absoluteあなたの子要素に。これは基本的に、子要素が、それらが入っているコンテナに対して絶対的に配置されることを意味します。

これが実際のコードペンです: http://codepen.io/JTLR/pen/ojgLy

もう 1 つの方法は、子要素にfloat: leftorを配置display: inline-blockすることです。これにより、子要素が隣り合わせになります。インラインブロック要素は、デフォルトで要素間にスペースがあることに注意してください。

于 2013-11-09T19:06:58.740 に答える
1

要素のインライン スタイルを失い、.date追加position: absolute;します。ここにフィドルがあります

*注:要素をコンテナー要素内に絶対配置する場合は、親要素内に絶対配置要素を含めるmargin-left代わりに使用する必要があります。left

<div id ="calCon">
  <div class="date">cell 0</div>
  <div class="date">cell 1</div>
  <div class="date">cell 2</div>
  <div class="date">cell 3</div>
  <div class="date">cell 4</div>
  <div class="date">cell 5</div>
  <div class="date">cell 6</div>
</div>


.date {
  position: absolute;
  width: 98px;
  height: 30px;
  border: 1px solid blue;
  background: green;
}
.date:nth-of-type(1) {
  margin-left: 0;
}
.date:nth-of-type(2) {
  margin-left: 100px;
}
.date:nth-of-type(3) {
  margin-left: 200px;
}
.date:nth-of-type(4) {
  margin-left: 300px;
}
.date:nth-of-type(5) {
  margin-left: 400px;
}
.date:nth-of-type(6) {
  margin-left: 500px;
}
.date:nth-of-type(7) {
  margin-left: 600px;
}
于 2013-11-09T19:10:18.193 に答える
0

位置を理解する必要があります: 相対的な手段。ここで、日付クラスでposition:absoluteを作成します。問題が解決します。

于 2013-11-09T19:46:38.340 に答える