Question

这是我在这里的第一篇文章，我是法国人，请原谅我的语言......

我在css中创建了一个系统列，将显示规则table-cell和百分比与.columns类相结合。

如果需要，我希望.columns子元素的宽度可以等于两个或更多默认项。所以我创建了类（.C2，.C3，.C4 ...）以附加到相关的子元素（.C2类，用于2个项目等）。< / p>

此解决方案在表单中完全正常工作（完全在表单元素中），但我无法在单个div中重现此行为。所以我试图获得表单元素css的所有功能，将它们附加到div ...没有结果。

以下是一个例子：

＆＃13;

@import url(http://scriptura.github.io/Styles/Public/Main.css);

＆＃13;

<html>
  <body itemscope="itemscope" itemtype="https://schema.org/WebPage" class="onepage-color">
    <section class="section">
      <div class="wrap grid12">
        <h2 class="highlight">Test Columns</h2>
        <div class="columns">
          <div>
            <h2 class="h5 highlight">Test n°1</h2>
            <p><code>form .columns</code></p>
            <form>
              <div class="columns-smallspace">
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
              </div>
              <div class="columns-smallspace">
                <div class="input c2">
                  <input type="text" value=".c2"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
              </div>
              <div class="columns-smallspace">
                <div class="input c3">
                  <input type="text" value=".c3"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
              </div>
            </form>
            <p class="message-success">Ici, on voit que la colonne comportant l'input .c2, prend bien la place de deux colonnes quand elle est placée dans un <code>form</code>. Idem pour .c3 qui prend la place de trois colonnes.</p>
          </div>
          <div>
            <h2 class="h5 highlight">Test n°2</h2>
            <p><code>div .columns</code></p>
            <div style="display:table;" class="elleEstIci">
              <div class="columns-smallspace">
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
              </div>
              <div class="columns-smallspace">
                <div class="input c2">
                  <input type="text" value=".c2"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
              </div>
              <div class="columns-smallspace">
                <div class="input c3">
                  <input type="text" value=".c3"/>
                </div>
                <div class="input">
                  <input type="text"/>
                </div>
              </div>
            </div>
            <p class="message-error">La même classe .c2 placée dans le même contexte, à l'exception notable d'une <code>div</code> à la place du <code>form</code>, donne lieu à une anarchie totale sur la deuxième ligne (idem pour .c3)...</p>
          </div>
        </div>
        <h2 class="h5 highlight">Quid ?</h2>
        <p class="message">Comment configurer la div parente du deuxième test (div.elleEstIci) de manière à arriver au même résultat que le premier exemple&nbsp;?<br/>J'ai l'impression d'avoir tout essayé (display:table, etc)...</p>
        <p class="message-info">Vous trouverez la feuille de style complète à cette addresse (cf. lignes 437+) : <a href="https://github.com/Scriptura/Scriptura/blob/master/Web/Styles/Development/_core.scss">Scriptura sur Github</a>.</p>
      </div>
    </section>
  </body>
</html>

＆＃13;

如果您有解决方案，并且我有兴趣，请提前感谢。

Answer 1

好的，我发现：有必要在width: 100%上声明[class ^ = "columns"]> *。

所以是子元素，而不是我最初想到的父元素。听起来很简单......但之后我就集思广益了。

主题已解决。

列

1 个答案: