Set width based on classes (根据类设置宽度)

huangapple
go评论112阅读模式
英文:

SCSS set width based on classes

问题

我有一个HTML：

  1. <!-- 开始代码段：js 隐藏：false 控制台：true Babel：false -->
  4. <!-- 语言：lang-css -->
  5. .layout-20X80 {
  6.     div.label-txt {
  7.         width: 20%;
  8.     }
  9.     div.value-container {
  10.         width: 80%;
  11.     }
  12. }
  14. .layout-30X70 {
  15.     div.label-txt {
  16.         width: 30%;
  17.     }
  18.     div.value-container {
  19.         width: 70%;
  20.     }
  21. }
  23. .layout-40X60 {
  24.     div.label-txt {
  25.         width: 40%;
  26.     }
  27.     div.value-container {
  28.         width: 60%;
  29.     }
  30. }
  33. <!-- 语言：lang-html -->
  34. <div class="dync-template tmp-bg layout-20X80">
  35.   <div class="label-txt">Select Your Response</div>
  36.     <div class="value-container">
  37.       <mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
  38.          <button class="lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup"  mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
  39.      </mt-buttongroup>
  40.    </div>
  41. </div>
  44. <!-- 结束代码段 -->

我有多个类.layout-20X80, .layout-30X80等，所以根据这些类添加到父div中，我需要标签和值容器相邻或相互下方。但是，即使我添加.layout-50X50（两者都是50%），它们仍然相互下方。这是因为块元素吗？有没有更好的解决方案来解决这个问题？另外，如何避免这种重复的CSS？

英文:

I've an HTML

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .layout-20X80 {
  2.     div.label-txt {
  3.         width: 20%;
  5.     }
  6.     div.value-container {
  7.         width: 80%
  8.     }
  9. }
  11. .layout-30X70 {
  12.     div.label-txt {
  13.         width: 30%
  14.     }
  15.     div.value-container {
  16.         width: 70%
  17.     }
  18. }
  20. .layout-40X60 {
  21.     div.label-txt {
  22.         width: 40%
  23.     }
  24.     div.value-container {
  25.         width: 60%
  26.     }
  27. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;dync-template tmp-bg layout-20X80&quot;&gt;
  2.   &lt;div class=&quot;label-txt&quot;&gt;Select Your Response&lt;/div&gt;
  3.     &lt;div class=&quot;value-container&quot;&gt;
  4.       &lt;mt-buttongroup toggle selectionMode=&quot;single&quot; id=&quot;mtBtnRadioGroup&quot; segmentedControl&gt;
  5.          &lt;button class=&quot; lmn-btn-default&quot; *ngFor=&quot;let enum of fieldData.radioBtnGroup&quot;  mtButton (click)=&quot;singleSelect(1)&quot; [active]=&quot;enum.name==selectedItem&quot;&gt;{{enum.name}}&lt;/button&gt;
  6.      &lt;/mt-buttongroup&gt;
  7.    &lt;/div&gt;
  8. &lt;/div&gt;

<!-- end snippet -->

I've multiple classes .layout-20X80, .layout-30X80 etc so based on the classes If I add to the parent div, I need label and value container adjacent to each other/one below the other. But even If I add .layout-50X50 (50% for both) they both stay one below the other. Is it because of block element? Any better solution to resolve it? Also, how can I avoid this repetitive CSS

答案1

得分: 0

块级元素始终紧挨在一起，即使有空间给它们。您需要将它们的 display 属性设置为 inline-block，以显示为内联元素，但仍保留块级元素属性（如接受 width 和 height）。

  1. [class*="layout-"] div {
  2.   display: inline-block;
  4.   /*
  5.    * 使用浮动来消除内联块之间的空白间隙。
  6.    * 有很多方法可以做到这一点。例如，浮动元素将被从 DOM 流中弹出
  7.    */
  8.   float: left;
  9. }
  11. .layout-20X80 div.label-txt {
  12.   width: 20%;
  13. }
  15. .layout-20X80 div.value-container {
  16.   width: 80%;
  17. }
  1. <div class="dync-template tmp-bg layout-20X80">
  2.   <div class="label-txt">Select Your Response</div>
  3.   <div class="value-container">
  4.     <mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
  5.       <button class=" lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup" mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
  6.     </mt-buttongroup>
  7.   </div>
  8. </div>
英文:

Block elements always stays one after another, even if there is space for them. You need to set their display property to be inline-block to be shown as inline elements, but still keep block element properties (like accepting width and height)

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. [class*=&quot;layout-&quot;] div {
  2.   display: inline-block;
  3.   
  4.   /*
  5.    * Using float to remove gap from whitespace between inline-blocks.
  6.    * There is plenty of approaches. E.g. floated elements will be poped out of DOM flow
  7.    */
  8.   float: left;
  9. }
  11. .layout-20X80 div.label-txt {
  12.   width: 20%
  13. }
  15. .layout-20X80 div.value-container {
  16.   width: 80%
  17. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;dync-template tmp-bg layout-20X80&quot;&gt;
  2.   &lt;div class=&quot;label-txt&quot;&gt;Select Your Response&lt;/div&gt;
  3.   &lt;div class=&quot;value-container&quot;&gt;
  4.     &lt;mt-buttongroup toggle selectionMode=&quot;single&quot; id=&quot;mtBtnRadioGroup&quot; segmentedControl&gt;
  5.       &lt;button class=&quot; lmn-btn-default&quot; *ngFor=&quot;let enum of fieldData.radioBtnGroup&quot; mtButton (click)=&quot;singleSelect(1)&quot; [active]=&quot;enum.name==selectedItem&quot;&gt;{{enum.name}}&lt;/button&gt;
  6.     &lt;/mt-buttongroup&gt;
  7.   &lt;/div&gt;
  8. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月27日 21:07:33
  • 转载请务必保留本文链接：https://go.coder-hub.com/76565207.html
  • css
  • html
  • less
  • sass
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定