带边框样式的列 css

Question

Hi i need some help in creating a css to follow my prototype image嗨，我需要一些帮助来创建 css 以遵循我的原型图像

i want my old to be move to the right and the new to left with middle that a empty space but so far i couldnt get it to be done like this?我希望我的旧的移动到右边，新的移动到中间，中间是一个空的空间，但到目前为止我无法像这样完成它？

prototype image原型图像

 .column1 { flex: 50%; height: auto; width: 20%; border: 1px; border-style: solid; border-color: black; }.column2 { flex: 50%; height: auto; width: 20%; border: 1px; border-style: solid; border-color: black; }.row { display: flex; }.left { border: 1px; border-style: solid; border-color: black; }

 <div class="row"> <div class="column1 "> <h2 style="background-color:#6bbea0;" id="old">Column 1</h2> <fieldset id="f1" class="Field"> <label id="symbol">-><input id="name" disabled readonly></label> <:-- <ul id="checkbox" class="checkbox"> --> </fieldset> </div> <div class="column2 "> <h2 style="background-color; #b5d96b;" id="new">Column 2</h2> <fieldset id="f2" class="Field1"> <label id="symbol">-><input id="name" value="" disabled readonly></label> <!-- <ul id="checkbox" class="checkbox"> --> </fieldset> </div>

Answer 1

Add "column-gap" prop to your .row .将“column-gap”道具添加到您的.row 。 So you can control gap between columns in easy way.因此，您可以轻松控制列之间的间隙。

Also you can minimize your CSS by combining styles, please take a look:您还可以通过组合 styles 来最小化您的 CSS，请查看：

 .row { display: flex; column-gap: 3rem; }.column1, .column2 { flex: 1; border: 1px solid black; }.column1 { /* flex: 50%; height: auto; width: 20%; border: 1px; border-style: solid; border-color: black;*/ }.column2 { /* flex: 50%; height: auto; width: 20%; border: 1px; border-style: solid; border-color: black;*/ } /*.left { border: 1px; border-style: solid; border-color: black; } */

 <div class="row"> <div class="column1 "> <h2 style="background-color:#6bbea0;" id="old">Column 1</h2> <fieldset id="f1" class="Field"> <label id="symbol">-><input id="name" disabled readonly></label> <:-- <ul id="checkbox" class="checkbox"> --> </fieldset> </div> <div class="column2 "> <h2 style="background-color; #b5d96b;" id="new">Column 2</h2> <fieldset id="f2" class="Field1"> <label id="symbol">-><input id="name" value="" disabled readonly></label> <!-- <ul id="checkbox" class="checkbox"> --> </fieldset> </div>

Answer 2

You can use this pattern.您可以使用此模式。

 .row{ display: flex; justify-content: space-between; }.column1 { height: auto; width: 48%; /* border: 1px; */ border-style: solid; border-color: black; }.column2 { height: auto; width: 48%; /* border: 1px; */ border-style: solid; border-color: black; }.row { display: flex; } /*.left { border: 1px; border-style: solid; border-color: black; } */

 <div class="row"> <div class="column1 "> <h2 style="background-color:#6bbea0;" id="old">Column 1</h2> <fieldset id="f1" class="Field"> <label id="symbol">-><input id="name" disabled readonly></label> <:-- <ul id="checkbox" class="checkbox"> --> </fieldset> </div> <div class="column2 "> <h2 style="background-color; #b5d96b;" id="new">Column 2</h2> <fieldset id="f2" class="Field1"> <label id="symbol">-><input id="name" value="" disabled readonly></label> <!-- <ul id="checkbox" class="checkbox"> --> </fieldset> </div>

Answer 3

You need to remove the flex property from row and then you can use float properties and width properties in both the columns.您需要从行中删除 flex 属性，然后您可以在两列中使用 float 属性和 width 属性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css">
</link>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"> 
</script>
<style>
  .column1 {
  flex: 50%;
  height: auto;
  width: 45%;
  float: left;
  border-radius: 10px;
  border: 1px;
  border-style: solid;
  border-color: black;
}

.column2 {
  /* display: flex; */
  flex: 50%;
  height: auto;
  width: 45%;
  float: right;
  border-radius: 10px;
  border: 1px;
  border-style: solid;
  border-color: black;
}

/* .row {
  display: flex;
} */

.left {
  border: 1px;
  border-style: solid;
  border-color: black;
}
    </style>
  </head>
  <body>
    <div class="row">
      <div class="column1 ">
        <h2 style="background-color:#6bbea0;" id="old">Column 1</h2>
        <fieldset id="f1" class="Field">
          <label id="symbol">-><input id="name" disabled readonly></label>
          <!-- <ul id="checkbox" class="checkbox"> -->
        </fieldset>
      </div>

      <div class="column2 ">
        <h2 style="background-color: #b5d96b;" id="new">Column 2</h2>
        <fieldset id="f2" class="Field1">
          <label id="symbol">-><input id="name" value="" disabled readonly> 
   </label>
          <!-- <ul id="checkbox" class="checkbox"> -->
        </fieldset>
      </div>

  </body>
  <script>
    window.addEventListener('DOMContentLoaded', () => {
    document.getElementsByTagName("input")[0].onkeyup = function(event) {
    if (event.keyCode === 13) {
   alert('Press Escape Key. The textbox will freeze.');
    };

  }
});

带边框样式的列 css

问题描述

3 个解决方案

解决方案1
1 2022-01-31 07:13:04

解决方案2
0 2022-01-31 07:15:15

解决方案3
0 2022-01-31 08:51:35

带边框样式的列 css

问题描述

3 个解决方案

解决方案1 1 2022-01-31 07:13:04

解决方案2 0 2022-01-31 07:15:15

解决方案3 0 2022-01-31 08:51:35

解决方案1
1 2022-01-31 07:13:04

解决方案2
0 2022-01-31 07:15:15

解决方案3
0 2022-01-31 08:51:35