BinaryDevelop
  1. ホーム
  2. css

[解決済み] ネストしたdivのcssを簡素化

2022-02-10 09:17:54

質問

このようなDOMがあります。 

<div class='container'>
  <div class='visual'>
    indent indicator
  </div>
  <div class='nomove'>
    text in this class is always left-aligned
  </div>
  <div class='container'>
    <div class='visual'>
      indent indicator
    </div>
    <div class='nomove'>
      text in this class is always left-aligned
    </div>
    <!-- more container nesting possible -->
  </div>
</div>

CSSは 

.container .visual {
    margin-left:20px;
}
.container .container .visual {
    margin-left:40px;
}
.container .container .container .visual {
    margin-left:60px;
}

というのは、深さのレベルごとに行わなければならず、もちろん愚かなことです。

ここで jsfiddle (更新: より多くの構造、より多くの行のテキスト)

ツリー状のHTMLを維持したまま、同じ効果を得られる、よりシンプルな解決策はないでしょうか？

どのように解決するのですか？

このコードは正常に動作します。 

<html>
<head>
<style type="text/css">
    .container {
        margin-left: 20px;  
    }

    .nomove {
        position:absolute;
        left: 0px;
    width: 100px;
    }

    .dummie {
        color:transparent;
        width: 100px;
    }
}
</style>
</head>
<body>
<div class="container">
    <div class="visual">indent indicator</div>
    <div class="nomove">text in this class is always left-aligned</div>
    <div class="dummie">text in this class is always left-aligned</div>
    <div class='container'>
        <div class='visual'>indent indicator</div>
        <div class='nomove'>text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
        <div class="dummie">text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
    </div>
</div>
</body>
</html>

.nomove divは、position:absolute、left:0pxで左側に移動しています。dummie divはposition:absoluteに高さがないので、2つのdivの間に隙間ができます。

PS: 英語でごめんなさい ;)

EDIT

これで、ダミーとnomove divは同じテキスト、同じ幅になり、ダミーは透明になりました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します