一个div中有两个子元素，在不适用calc()的情况下实现两个子元素并排盛满父元素

可以使用flex布局来实现两个子元素并排盛满父元素的效果，而不需要使用calc()函数。下面是一个示例代码：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

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

.left, .right {
  flex-grow: 1;
  height: 100px;
}

.left {
  background-color: red;
}

.right {
  background-color: blue;
}

在这个例子中，我们使用了flex布局来实现子元素并排盛满父元素。通过设置父元素的display属性为flex，使其成为一个flex容器。然后通过设置子元素的flex-grow属性为1，使其在空间充足的情况下平分父元素的剩余空间，从而实现并排盛满的效果。

希望这个回答能够帮到您！

相关问题

多个div，每个div里有两个input，实现div可以上下拖拽，两个div换位置

你可以使用HTML5的拖放API来实现这个功能。首先，给每个div添加一个`draggable="true"`属性，使其可拖动。然后，监听`dragstart`事件和`dragover`事件，分别对被拖动的元素和目标元素进行处理。

以下是一个示例代码：

HTML:

<div class="drag-container">
  <div class="drag-item" draggable="true">
    <input type="text" placeholder="input 1">
    <input type="text" placeholder="input 2">
  </div>
  <div class="drag-item" draggable="true">
    <input type="text" placeholder="input 1">
    <input type="text" placeholder="input 2">
  </div>
  <div class="drag-item" draggable="true">
    <input type="text" placeholder="input 1">
    <input type="text" placeholder="input 2">
  </div>
</div>

CSS:

.drag-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.drag-item {
  width: calc(33.33% - 10px);
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

JavaScript:

const dragItems = document.querySelectorAll('.drag-item');
let dragItem = null;

// 监听dragstart事件，记录被拖动的元素
dragItems.forEach(item => {
  item.addEventListener('dragstart', e => {
    dragItem = e.target;
    setTimeout(() => {
      e.target.classList.add('hide');
    }, 0);
  });
});

// 监听dragover事件，处理拖动过程中的交换位置
dragItems.forEach(item => {
  item.addEventListener('dragover', e => {
    e.preventDefault();
    if (dragItem !== null && dragItem !== item) {
      const dropZone = e.target.closest('.drag-item');
      if (dropZone) {
        const bounding = dropZone.getBoundingClientRect();
        const offset = bounding.y + (bounding.height / 2);
        if (e.clientY - offset > 0) {
          dropZone.after(dragItem);
        } else {
          dropZone.before(dragItem);
        }
      }
    }
  });
});

// 监听dragend事件，重置被拖动的元素的样式
document.addEventListener('dragend', e => {
  dragItems.forEach(item => item.classList.remove('hide'));
  dragItem = null;
});

以上代码实现了拖动div和拖动input的区别。如果你想让div中的两个input也可以拖动，可以给它们分别添加`draggable="true"`属性，并在`dragstart`和`dragover`事件中处理它们的位置关系。

一个div里放2*2个子div，每个子div之间留有间隙

您好！要实现您的需求，可以通过在子div和父div中设置margin和padding来实现间隙。具体操作如下：

HTML代码：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS代码：

.parent {
  display: flex; /* 将父div设置为flex布局 */
  flex-wrap: wrap; /* 子div超出宽度后自动换行 */
  justify-content: space-between; /* 子div之间留有间隙 */
}

.child {
  width: calc(50% - 10px); /* 子div宽度为父div宽度的一半减去间隙宽度 */
  height: 100px;
  margin-bottom: 20px; /* 子div之间留有间隙 */
  background-color: #ccc;
}

其中，父div使用了flex布局，并设置了子div之间留有间隙的属性。子div设置了宽度、高度和间隙等属性。

希望这能解决您的问题！如果还有什么不清楚的地方，请随时提问。