html - 在 HTML 中复制设计

Question

我是 CSS 和 HTML 的新手，我有一个问题。

<div class="ssmp">
  <div class="ssmp-checkbox relative">
    <input type="checkbox" id="ssmp_vac" name="ssmp_vac" style="display: none;">
    <p class="checkbox_div"><span class="box "></span><span class="text" title="">სსმპ ადაპტირებულია</span></p>
    <label for="ssmp_vac" style="display: none;">სსმპ ადაპტირებულია</label>
    <span class="b-16 auto-height m-left-8">
      <i class="icon-16 ssmp-16 m-0"></i>
    </span>
  </div>
  <div class="ssmp-info relative">
    <i class="ssmp-info-icon"></i> მონიშნეთ ჩეკბოქსი თუ ვაკანსია საშუალება განკუთვნილია ან ადაფტირებულია სპეციალური საჭიროების მქონე პირებისთვის
  </div>
</div>

看起来像这样:

应该是这样的:

我应该用 CSS 还是 HTML 来修复它？

Answer 1

使用 flexbox (CSS)

.flex-container {
    display: -webkit-flex;
    display: flex;
}

.initial-flex
{
    -webkit-flex: initial;
    flex: initial;
}
.flex-1{
    -webkit-flex: 1;
    flex: 1;
}

然后只需将这些类添加到您的标记中:

<div class="ssmp flex-container"> 
    <div class="ssmp-checkbox relative initial-flex">
        <input type="checkbox" id="ssmp_vac" name="ssmp_vac" style="display: none;"><p class="checkbox_div"><span class="box "></span><span class="text" title="">სსმპ ადაპტირებულია</span></p>
        <label for="ssmp_vac" style="display: none;">სსმპ ადაპტირებულია</label>
        <span class="b-16 auto-height m-left-8">
            <i class="icon-16 ssmp-16 m-0"></i>
        </span>
    </div>
    <div class="ssmp-info relative flex-1">
        <i class="ssmp-info-icon"></i>
მონიშნეთ ჩეკბოქსი თუ ვაკანსია საშუალება განკუთვნილია ან ადაფტირებულია სპეციალური საჭიროების მქონე პირებისთვის
    </div>      
</div>