Question

我试图创建一个简单的计算器，并且无法格式化不同的元素框。我基本上只需要将左栏中的项目（服务，第一食物，第二食物）放在页面中间的左侧部分，并将比较放在页面中间的右侧部分。我试图调整边距，但它一直在弄乱我的元素。我对此比较陌生，所以我不确定我是否做错了。

我的代码：

＆＃13;

  .side {
  margin: 30%;
  border: 3px solid #73AD21; 
  position: relative;
  width: 33%;  
}
.sideone {
  margin: 20%;
  border: 3px solid #73AD21;
  position:relative;
  width: 33%;
}
.comparison {
  position:relative;
  margin-left: 30%;
}
.outer {
  display: flex;
}
.color-red{
color:red;
background:transparent}
.color-green{
color:green;
background:transparent}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <meta name="viewport" content="width=10px, initial-scale=1.0">
</head>

<body>

  <label>
    Servings:
    <input type="number" id="numberOfStocks" value="1" min="0" />
  </label>
<div class="outer">
  <div>
    <div class="side">
      <h2>First Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
    </div>
    <div class="sideone">
      <h2>Second Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>

    </div>
  </div>
  <div class="comparison">
    <h2>Comparison:</h2>
    <br>
    <br>
    <div class="result"></div>
  </div>
</div>
  
</body>

＆＃13;

实际功能并不适用于该代码段，但它与问题并不真正相关。谢谢你的帮助！

Answer 1

这是因为你正在设置div元素。看看里面的其他元素，你可以使用溢出元素解决隐藏在div中的问题，如：

溢出：隐藏;

例如：

.side {
  margin: 30%;
  border: 3px solid #73AD21; 
  width: 10%;
  position: relative;
  overflow: hidden; 
}

<div class="side">
      <h2>First Item<span class="servingUnit"></span>:</h2>
      <select class="selectStock">
        <option value="-1">Pick a food!</option>
      </select>
      <br>
      <br>
    </div>

但这种方式会隐藏它们。您可以解决它，同时设置div内部元素的大小，我认为这可能会更适合您的提案。

Answer 2

这是你想要做的吗？（https://jsfiddle.net/l0ul0u/sohpntvp/）

.side, .sideone {
    border: 3px solid #73AD21; 
}
h2{
    display: inline-block;
}
.outer {
    display: flex;
}
.color-red{
    color:red;
    background:transparent}
.color-green{
    color:green;
    background:transparent}

CSS调整元素宽度（有问题）

2 个答案: