0

テーブルの各行に単純な賛成票/反対票カウンターを追加しようとしています。カウンターは基本的に、テーブル セルに挿入する css によって形成された div のコンテナーです。ただし、そのままでは、投票カウンターによって行が膨らみます。一番上の div コンテナーのサイズを変更しようとしましたが、投票要素のサイズのみが変更されます。実際のカウンターは同じサイズのままです。css初心者なのでよくわかりません。すべてのサブ要素を手動で変更することなく、最上位レベルから投票カウンター全体を簡単にスケーリングできるように、CSS を書き直す最良の方法は何ですか? このカウンターを表のセル内ではなく、サイトの別の場所に貼り付けたい場合、これは素晴らしいことです。

これがjsfiddleです。 https://jsfiddle.net/havok2063/30way48v/

賛成票/反対票カウンターを説明する非常に単純な html。

<div class="vote circle">
    <div class="increment up"></div>
    <div class="increment down"></div>

    <div class="count">8</div>
</div>

ここにCSSがあります。

.vote {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 10rem;
  height: 10rem;
}

.circle .up { border-radius: 10rem 10rem 0 0; }
.circle .down { border-radius: 0 0 10rem 10rem; }
.circle .count { border-radius: 50%; }

.up {
  background: #4BC35F;
  height: 50%;
  margin-bottom: 0.25rem;  
}
.down {
  background: #C15044;
  height: 50%;  
}

.increment {
  flex: 1 0 0;
  text-align: center;
  opacity: .5;
  transition: 0.3s;
  cursor: pointer;
}
.increment:hover { 
  opacity : 1;
}

.count {
  position: absolute;
  top: 0;
  background: rgba(245,245,245,1.0);
  border-radius: 0.1rem;
  margin: 2.5rem;
  width: 5rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 5rem;
  text-align: center;
  box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
  pointer-events: none;
}

html, body { height: 100%; }
4

2 に答える 2

0

OK、ここに小さなものがあり<td>ます ここにフィドルがあります https://jsfiddle.net/30way48v/3/

td{height: 50px;}
.vote {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0px;

}

.circle .up { border-radius: 5rem 5rem 0 0; }
.circle .down { border-radius: 0 0 5rem 5rem; }
.circle .count { border-radius: 50%; }

.up {
  background: #4BC35F;
  height: 50%;
  margin-bottom: 0.25rem;  
}
.down {
  background: #C15044;
  height: 50%;  
}

.increment {
  flex: 1 0 0;
  text-align: center;
  opacity: .5;
  transition: 0.3s;
  cursor: pointer;
}
.increment:hover { 
  opacity : 1;
}

.count {
  position: absolute;
  top: 0;
  background: rgba(245,245,245,1.0);
  border-radius: 0.1rem;
  margin: 1.45rem;
  width: 2rem;
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 2rem;
  text-align: center;
  box-shadow: 0 0 0 0.5rem rgba(245,245,245,1.0);
  pointer-events: none;

  &.upvoted { color: #4BC35F; }
  &.downvoted { color: #C15044; }
}

html, body { height: 100%; }
于 2015-07-06T18:19:11.760 に答える