Question

我有两个div，如下图所示：

上图：

灰色矩形是容器div。
白色矩形是一个带有transform的div：translateX（somevalue），这个矩形是可拖动的。因此，当拖动其translateX和translateY时，将在代码中进行更改。
蓝色矩形是一个div，它应该占用所有可用的宽度。它的高度是固定的。

我没有任何代码，因为我尝试使用react-draggable做反应，使用translateX和translateY来拖动元素。

我想要一个纯粹的css解决方案，因为我不想仅仅为了增加div的宽度而重新渲染组件。

注意：

蓝色矩形被认为是用于演示目的的div，只是为了使示例更易于理解。在实际项目中，蓝色框将是一条线，在该线上，我将放置容器左边缘和移动对象左边缘之间的距离。像统治者的东西。

更新

这是我的代码：

<div className="cover-print-area-settings-container">
  <div style={{ background: 'black', height: 10, width: 'auto' }} />
  <Draggable
    bounds={{
      left: 0,
      top: 0,
      right: 300,
      bottom: 150
    }}
  >
    <div id="cover-print-area-draggable-content" className="cover-print-area-settings-content">
      <div className="contact-name">Contact Name</div>
      <div className="side-by-side-start-center">
        <PhoneIcon className="contact-detail-icon" />
        <span>Mobile No</span>
      </div>
      <div className="side-by-side-start-center email-wrapper">
        <EmailIcon className="contact-detail-icon" />
        <span>Email</span>
      </div>
      <div className="side-by-side-start-center">
        <LocationIcon className="contact-detail-icon contact-location-icon" />
        <div className="contact-address-wrapper">
          <p className="contact-address"> Address Line 1 </p>
          <span className="contact-address-details"> Address Line 2 </span>
        </div>
      </div>
    </div>
  </Draggable>
</div>

代码中的可拖动元素是从react-draggable导入的。以下是react-draggable的文档：https://github.com/mzabriskie/react-draggable

与上述html相关的css如下：

  .cover-print-area-settings-container
    height: 300px;
    width: 600px;
    overflow: auto
    // height: 100%
    background-color: #fff8dc
    .cover-print-area-settings-content
      border: 1px solid black
      display: inline-block
      vertical-align: top
      .contact-name
        font-size: 36px
        text-align: left    
      .contact-detail-icon
        margin-right: 7px
      .contact-location-icon
        padding-top: 12px
        align-self: flex-start
      .email-wrapper
        margin-top: 5px;
        margin-bottom: -8px;
      .contact-address-wrapper
        display: flex
        flex-direction: column
        justify-content: flex-start 
        .contact-address
          text-align: left
          align-self: flex-start
        .contact-address-details
          margin-top: -12px
          text-align: left
          align-self: flex-start

Answer 1

在这种情况下我会考虑CSS变量，你只需调整将用于翻译和宽度的变量：

.container {
  padding:20px 0;
  height:100px;
  background:grey;
}

.blue {
  height:100%;
  background:blue;
  display:inline-block;
  width:var(--c);
  margin-right:calc(var(--c) * -1);
}
.white {
height:100%;
 width:100px;
  background:white;
  display:inline-block;
  transform:translateX(var(--c));
}

<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>

另一个想法是将蓝色部分视为白盒的伪元素，并且更容易考虑X / Y转换：

.container {
  padding:20px 0;
  height:100px;
  background:grey;
  overflow:hidden;
}

.white {
height:100%;
 width:100px;
  background:white;
  display:inline-block;
  transform:translateX(var(--c));
  position:relative;
}
.white:before {
  content:"";
  position:absolute;
  top:0;
  left:-100vw;
  right:100%;
  bottom:0;
  background:blue;
}

<div class="container" style="--c:50px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:100px">
<div class="blue"></div><div class="white"></div>
</div>
<div class="container" style="--c:200px">
<div class="blue"></div><div class="white"></div>
</div>

div获取其邻居已转换的剩余空间

1 个答案: