Child 具有相同高度的 div (inline-table & table-cell )

Question

我有三个 child div，我不得不在 child 中使用 display: table-cell，在 parent 中使用 display: inline-table使它们具有响应性，因此在缩小 windows 时输入和按钮不会 'spill out'。我想让它们都具有相同的高度。我尝试搜索，但我发现的都是关于使用 height: 100% 的，但没有用。

代码：

body {
  background-color: white;
}

input,
select,
textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
}

.Order_Create_Ship_Stock>div {
  width: 30%;
  margin: 5px;
  padding: auto;
  display: inline-table;
  border: solid;
  height: 100%;
}

.Order_Create,
.Order_Ship,
.Order_Store {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
  display: table-cell;
  height: 100%;
}

#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: black;
  border: 2px solid #4CAF50;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: auto;
}

#SubmitCreateOrder:hover {
  background-color: #4CAF50;
  color: white;
}

#SubmitShipOrder:hover {
  background-color: #4CAF50;
  color: white;
}

#SubmitStoreOrder:hover {
  background-color: #4CAF50;
  color: white;
}

<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
  <div id="OrderCreate" class="Order_Create">
    <form onsubmit="App.createOrder(); return false">
      <label for="BarcodeInput">
                        <span>Barcode</span>
                        <input name="BarcodeInput"id="Barcode" class="Barcorde" type="text" placeholder="Order's Barcode...">
                    </label>
      <label for="OwnerInput">
                        <span>Owner</span>
                        <input name="OwnerInput" id="Owner" class="Owner" type="text" placeholder="Owner of the product...">
                    </label>
      <label for="ProductListInput">
                        <span>Product list</span>
                        <input name="ProductListInput" id="ProductList" class="Product_List" type="text" placeholder="Product list of the order....">
                    </label>
      <label for="ExpirationDateInput">
                        <span>Expiration date</span>
                        <input name="ExpirationDateInput" id="ExpirationDate" class="Expiration_Date" type="date">
                    </label>
      <label for="TemperatureMinimalInput">
                        <span>Temperature minimal</span>
                        <input name="TemperatureMinimalInput" id="TemperatureMinimal" class="Temperature_Minimal" type="number" placeholder="Minimal temperature of order's environment...">
                    </label>
      <label for="TemperatureMaximalInput">
                        <span>Temperature maximal</span>
                        <input name="TemperatureMaximalInput" id="TemperatureMaximal" class="Temperature_Maximal" type="number" placeholder="Maximal temperature of order's environment...">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
                            <option value="">---Please select an IOT Device---</option>
                        </select>
                    </label>
      <label for="FinalDestinationInput">
                        <span>Final destination</span>
                        <input name="FinalDestinationInput" id="FinalDestination" class="Final_Destination" type="text" placeholder="Order's final destination...">
                    </label>
      <button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">Create Order</button>
    </form>
  </div>
  <div id="OrderShip" class="Order_Ship">
    <form onsubmit="App.ShipOrder(); return false">
      <label for="OrderIDInput">
                        <span>OrderID</span>
                        <input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
                    </label>
      <label for="ActualLocationInput">
                        <span>Actual location</span>
                        <input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
                    </label>
      <label for="ActualTemperatureInput">
                        <span>Actual temperature</span>
                        <input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
                    </label>
      <label for="CurrentCounterpartyInput">
                        <span>Counterparty</span>
                        <input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
                        </select>
                    </label>
      <label for="AnticipatedDateInput">
                        <span>Anticipated date</span>
                        <input name="AnticipatedDateInput" id="AnticipatedDate" class="Anticipated_Date" type="date">
                    </label>
      <label for="DestinationInput">
                        <span>Destination</span>
                        <input name="DestinationInput" id="Destination" class="Destination_" type="text" placeholder="Order's destination">
                    </label>
      <button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">Ship Order</button>
    </form>
  </div>
  <div id="OrderStore" class="Order_Store">
    <form onsubmit="App.storeOrder(); return false">
      <label for="OrderIDInput">
                        <span>OrderID</span>
                        <input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
                    </label>
      <label for="ActualLocationInput">
                        <span>Actual location</span>
                        <input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
                    </label>
      <label for="ActualTemperatureInput">
                        <span>Actual temperature</span>
                        <input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
                    </label>
      <label for="CurrentCounterpartyInput">
                        <span>Counterparty</span>
                        <input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
                    </label>
      <label for="IOTDeviceInput">
                        <span>IOT Device</span>
                        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
                            <option value="">---Please select an IOT Device---</option>
                        </select>
                    </label>
      <button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">Store Order</button>
    </form>
  </div>
</div>

Answer 1

你的 inline-table 显示全错了。应该如何：

<div style="display: inline-table">
    <div style="display: table-cell">
        <!-- Your form stuff -->
    </div>
    <!-- Repeat -->
</div>

您的代码：

<div>
    <div style="display: inline-table; display: table-cell">
        <!-- Your form stuff -->
    </div>
    <!-- Repeat -->
</div>

我添加和编辑的内容：

.Order_Create_Ship_Stock > div {
  display: table-cell;
  width: 10%;
  margin: 5px;
  border: solid;
}

.Order_Create_Ship_Stock {
  display: inline-table;
  border-spacing: 10px;
}

.Order_Create,
.Order_Ship,
.Order_Store {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

完整代码：

body {
  background-color: white;
}

input,
select,
textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
}

.Order_Create_Ship_Stock>div {
  display: table-cell;
  width: 10%;
  margin: 5px;
  border: solid;
}

.Order_Create_Ship_Stock {
  display: inline-table;
  border-spacing: 10px;
}

.Order_Create,
.Order_Ship,
.Order_Store {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;
}

#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: black;
  border: 2px solid #4caf50;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin: auto;
}

#SubmitCreateOrder:hover {
  background-color: #4caf50;
  color: white;
}

#SubmitShipOrder:hover {
  background-color: #4caf50;
  color: white;
}

#SubmitStoreOrder:hover {
  background-color: #4caf50;
  color: white;
}

<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
  <div id="OrderCreate" class="Order_Create">
    <form onsubmit="App.createOrder(); return false">
      <label for="BarcodeInput">
        <span>Barcode</span>
        <input
          name="BarcodeInput"
          id="Barcode"
          class="Barcorde"
          type="text"
          placeholder="Order's Barcode..."
        />
      </label>
      <label for="OwnerInput">
        <span>Owner</span>
        <input
          name="OwnerInput"
          id="Owner"
          class="Owner"
          type="text"
          placeholder="Owner of the product..."
        />
      </label>
      <label for="ProductListInput">
        <span>Product list</span>
        <input
          name="ProductListInput"
          id="ProductList"
          class="Product_List"
          type="text"
          placeholder="Product list of the order...."
        />
      </label>
      <label for="ExpirationDateInput">
        <span>Expiration date</span>
        <input
          name="ExpirationDateInput"
          id="ExpirationDate"
          class="Expiration_Date"
          type="date"
        />
      </label>
      <label for="TemperatureMinimalInput">
        <span>Temperature minimal</span>
        <input
          name="TemperatureMinimalInput"
          id="TemperatureMinimal"
          class="Temperature_Minimal"
          type="number"
          placeholder="Minimal temperature of order's environment..."
        />
      </label>
      <label for="TemperatureMaximalInput">
        <span>Temperature maximal</span>
        <input
          name="TemperatureMaximalInput"
          id="TemperatureMaximal"
          class="Temperature_Maximal"
          type="number"
          placeholder="Maximal temperature of order's environment..."
        />
      </label>
      <label for="IOTDeviceInput">
        <span>IOT Device</span>
        <select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
          <option value="">---Please select an IOT Device---</option>
        </select>
      </label>
      <label for="FinalDestinationInput">
        <span>Final destination</span>
        <input
          name="FinalDestinationInput"
          id="FinalDestination"
          class="Final_Destination"
          type="text"
          placeholder="Order's final destination..."
        />
      </label>
      <button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">
        Create Order
      </button>
    </form>
  </div>
  <div id="OrderShip" class="Order_Ship">
    <form onsubmit="App.ShipOrder(); return false">
      <label for="OrderIDInput">
        <span>OrderID</span>
        <input
          name="OrderIDInput"
          id="OrderID"
          class="Order_ID"
          type="text"
          placeholder="Order's ID"
        />
      </label>
      <label for="ActualLocationInput">
        <span>Actual location</span>
        <input
          name="ActualLocationInput"
          id="ActualLocation"
          class="Actual_Location_Input"
          type="text"
          placeholder="Order's actual location"
        />
      </label>
      <label for="ActualTemperatureInput">
        <span>Actual temperature</span>
        <input
          name="ActualTemperatureInput"
          id="ActualTemperature"
          class="Actual_Temperature"
          type="text"
          placeholder="Order's actual environment temperature"
        />
      </label>
      <label for="CurrentCounterpartyInput">
        <span>Counterparty</span>
        <input
          name="CurrentCounterpartyInput"
          id="CurrentCounterparty"
          class="Current_Counterparty"
          type="text"
          placeholder="Order's current counterparty"
        />
      </label>
      <label for="IOTDeviceInput">
        <span>IOT Device</span>
        <select
          name="IOTDeviceInput"
          id="IOTDevice"
          class="IOT_Device_Input"
        >
        </select>
      </label>
      <label for="AnticipatedDateInput">
        <span>Anticipated date</span>
        <input
          name="AnticipatedDateInput"
          id="AnticipatedDate"
          class="Anticipated_Date"
          type="date"
        />
      </label>
      <label for="DestinationInput">
        <span>Destination</span>
        <input
          name="DestinationInput"
          id="Destination"
          class="Destination_"
          type="text"
          placeholder="Order's destination"
        />
      </label>
      <button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">
        Ship Order
      </button>
    </form>
  </div>
  <div id="OrderStore" class="Order_Store">
    <form onsubmit="App.storeOrder(); return false">
      <label for="OrderIDInput">
        <span>OrderID</span>
        <input
          name="OrderIDInput"
          id="OrderID"
          class="Order_ID"
          type="text"
          placeholder="Order's ID"
        />
      </label>
      <label for="ActualLocationInput">
        <span>Actual location</span>
        <input
          name="ActualLocationInput"
          id="ActualLocation"
          class="Actual_Location_Input"
          type="text"
          placeholder="Order's actual location"
        />
      </label>
      <label for="ActualTemperatureInput">
        <span>Actual temperature</span>
        <input
          name="ActualTemperatureInput"
          id="ActualTemperature"
          class="Actual_Temperature"
          type="text"
          placeholder="Order's actual environment temperature"
        />
      </label>
      <label for="CurrentCounterpartyInput">
        <span>Counterparty</span>
        <input
          name="CurrentCounterpartyInput"
          id="CurrentCounterparty"
          class="Current_Counterparty"
          type="text"
          placeholder="Order's current counterparty"
        />
      </label>
      <!-- Your Stuff -->
      <label for="IOTDeviceInput">
        <span>IOT Device</span>
        <select
          name="IOTDeviceInput"
          id="IOTDevice"
          class="IOT_Device_Input"
        >
          <option value="">---Please select an IOT Device---</option>
        </select>
      </label>
      <button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">
        Store Order
      </button>
    </form>
  </div>
</div>

Child 具有相同高度的 div (inline-table & table-cell )

Child divs with same height (inline-table & table-cell )

html

css

parent-child