时间戳

首页 > 解决方案 > dhtmlx 调度器灯箱对齐

css - dhtmlx 调度器灯箱对齐

问题描述

这是来自 dhtmlx 示例https://jsbin.com/wunanab/edit?output的调度程序编辑

在此处输入图像描述

如何通过编辑部分和 css让红线对齐input[name="url1"]并对齐？picturesdiv.detail

如果我删除textareaand inputbox，这看起来不错，但我需要在位置①中的 textarea 和 inputbox。

我尝试增加红线左侧的高度，但没有奏效。

谢谢你。

<div class="dhx_wrap_section">
  <div id="area_1605839927338" class="dhx_cal_lsection"><label for="input_1605839927345"> </label></div>
  <div class="detail">
    <div class="chposx" chpos="1">
      <div class="dhx_form_repeat"><label class="radiolabel display"><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="D" name="display1" value="1" id="input_1605839927345">poster　</label><label class="radiolabel display fullonly" style=""><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="A" name="display1" value="2">inf　</label><label class="radiolabel display fullonly" style=""><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="I" name="display1" value="4">book　</label><label class="radiolabel display fullonly" style=""><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="B" name="display1" value="8">guide　</label><label class="radiolabel display fullonly" style=""><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="C" name="display1" value="16">war　</label><label class="radiolabel display fullonly" style=""><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="E" name="display1" value="32">3 in 1　</label><label class="radiolabel display fullonly" style=""><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="H" name="display1" value="64">map　</label></div><input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic1" id="pic1" value="5fb48c235c998.jpg`5fb48c2381a3a.jpg`5fb48c23a64f8.jpg`5fb4c259ccd4e.png`5fb4c25a4c5de.png`5fb4c25abf9cb.png`5fb4c25b38539.png`5fb4c25ba5187.png`5fb4c25c1d78f.png`5fb4c25c8a79f.png`" style="display: inline-block;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic1Alt" id="pic1Alt" value="738644471075611256320203328111026`744278471412766581820203428111010`744298471264643877720203428111030````d````" style="display: inline-block;"><textarea class="dhx_repeat_radio chdisplay" chdisplay="1" name="notes1" placeholder=""></textarea>
      <div class="clear"></div><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="text" name="url1" placeholder="url1" value="">
      <div class="clear"></div>
      <ul class="items sortablelist" id="v_pic1" data-listidx="0" chdisplay="1">
        <li id="5fb48c235c998" style="cursor: pointer;">
          <h5>5fb48c235c998.jpg</h5><img src="https://dummyimage.com/120x120/000/fff&text=1" title="5fb48c235c998.jpg" alt="5fb48c235c998.jpg" id="5fb48c235c998_img" onclick="openBigPic('/nlpi/data4/pic/5fb48c235c998.jpg')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb48c235c998.jpg" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb48c235c998.jpg')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="738644471075611256320203328111026" placeholder="">
        </li>
        <li id="5fb48c2381a3a" style="cursor: pointer;">
          <h5>5fb48c2381a3a.jpg</h5><img src="https://dummyimage.com/120x120/000/fff&text=2" title="5fb48c2381a3a.jpg" alt="5fb48c2381a3a.jpg" id="5fb48c2381a3a_img" onclick="openBigPic('/nlpi/data4/pic/5fb48c2381a3a.jpg')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb48c2381a3a.jpg" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb48c2381a3a.jpg')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="744278471412766581820203428111010" placeholder="">
        </li>
        <li id="5fb48c23a64f8" style="cursor: pointer;">
          <h5>5fb48c23a64f8.jpg</h5><img src="https://dummyimage.com/120x120/000/fff&text=3" title="5fb48c23a64f8.jpg" alt="5fb48c23a64f8.jpg" id="5fb48c23a64f8_img" onclick="openBigPic('/nlpi/data4/pic/5fb48c23a64f8.jpg')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb48c23a64f8.jpg" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb48c23a64f8.jpg')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="744298471264643877720203428111030" placeholder="">
        </li>
        <li id="5fb4c259ccd4e" style="cursor: pointer;">
          <h5>5fb4c259ccd4e.png</h5><img src="https://dummyimage.com/120x120/000/fff&text=4" title="5fb4c259ccd4e.png" alt="5fb4c259ccd4e.png" id="5fb4c259ccd4e_img" onclick="openBigPic('/nlpi/data4/pic/5fb4c259ccd4e.png')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb4c259ccd4e.png" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb4c259ccd4e.png')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="" placeholder="">
        </li>
        <li id="5fb4c25a4c5de" style="cursor: pointer;">
          <h5>5fb4c25a4c5de.png</h5><img src="https://dummyimage.com/120x120/000/fff&text=5" title="5fb4c25a4c5de.png" alt="5fb4c25a4c5de.png" id="5fb4c25a4c5de_img" onclick="openBigPic('/nlpi/data4/pic/5fb4c25a4c5de.png')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb4c25a4c5de.png" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb4c25a4c5de.png')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="" placeholder="">
        </li>
        <li id="5fb4c25abf9cb" style="cursor: pointer;">
          <h5>5fb4c25abf9cb.png</h5><img src="https://dummyimage.com/120x120/000/fff&text=6" title="5fb4c25abf9cb.png" alt="5fb4c25abf9cb.png" id="5fb4c25abf9cb_img" onclick="openBigPic('/nlpi/data4/pic/5fb4c25abf9cb.png')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb4c25abf9cb.png" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb4c25abf9cb.png')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="" placeholder="">
        </li>
        <li id="5fb4c25b38539" style="cursor: pointer;">
          <h5>5fb4c25b38539.png</h5><img src="https://dummyimage.com/120x120/000/fff&text=7" title="5fb4c25b38539.png" alt="5fb4c25b38539.png" id="5fb4c25b38539_img" onclick="openBigPic('/nlpi/data4/pic/5fb4c25b38539.png')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb4c25b38539.png" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb4c25b38539.png')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="d" placeholder="">
        </li>
        <li id="5fb4c25ba5187" style="cursor: pointer;">
          <h5>5fb4c25ba5187.png</h5><img src="https://dummyimage.com/120x120/000/fff&text=8" title="5fb4c25ba5187.png" alt="5fb4c25ba5187.png" id="5fb4c25ba5187_img" onclick="openBigPic('/nlpi/data4/pic/5fb4c25ba5187.png')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb4c25ba5187.png" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb4c25ba5187.png')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="" placeholder="">
        </li>
        <li id="5fb4c25c1d78f" style="cursor: pointer;">
          <h5>5fb4c25c1d78f.png</h5><img src="https://dummyimage.com/120x120/000/fff&text=9" title="5fb4c25c1d78f.png" alt="5fb4c25c1d78f.png" id="5fb4c25c1d78f_img" onclick="openBigPic('/nlpi/data4/pic/5fb4c25c1d78f.png')">
          <div><a href="javascript:;" title="delee" class="delPic" data-value="nlpi/data4/pic/5fb4c25c1d78f.png" data-guid="151"><i class="fa fa-times"></i></a><a href="javascript:;" title="zoom" onclick="openBigPic('/nlpi/data4/pic/5fb4c25c1d78f.png')"><i class="fa fa-search-plus"></i></a></div><input type="text" class="pic1Alt_lay" value="" placeholder="">
        </li>
        
      </ul>
      <form action="upload.php" class="dropzone dz-clickable" id="pic1drop" chdisplay="1">
        <div class="dz-default dz-message"><button class="dz-button" type="button">Drop files here to upload</button></div>
      </form>
    </div>
    <div class="chposx" chpos="2" style="display: none;">
      <div class="dhx_form_repeat"><label class="radiolabel display"><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="poster" name="display2" value="1">poster　</label></div><input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic2" id="pic2" value="" style="display: inline-block;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic2Alt" id="pic2Alt" value="" style="display: inline-block;"><textarea class="dhx_repeat_radio chdisplay" chdisplay="1" name="notes2" placeholder=""></textarea>
      <div class="clear"></div><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="text" name="url2" placeholder="url2" value="">
      <div class="clear"></div>
      <ul class="items sortablelist" id="v_pic2" data-listidx="1" chdisplay="1"></ul>
      <form action="upload.php" class="dropzone dz-clickable" id="pic2drop" chdisplay="1">
        <div class="dz-default dz-message"><button class="dz-button" type="button">Drop files here to upload</button></div>
      </form>
    </div>
    <div class="chposx" chpos="4" style="display: none;">
      <div class="dhx_form_repeat"><label class="radiolabel display"><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="poster" name="display3" value="1">poster　</label></div><input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic3" id="pic3" value="" style="display: inline-block;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic3Alt" id="pic3Alt" value="" style="display: inline-block;"><textarea class="dhx_repeat_radio chdisplay" chdisplay="1" name="notes3" placeholder=""></textarea>
      <div class="clear"></div><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="text" name="url3" placeholder="url3" value="">
      <div class="clear"></div>
      <ul class="items sortablelist" id="v_pic3" data-listidx="2" chdisplay="1"></ul>
      <form action="upload.php" class="dropzone dz-clickable" id="pic3drop" chdisplay="1">
        <div class="dz-default dz-message"><button class="dz-button" type="button">Drop files here to upload</button></div>
      </form>
    </div>
    <div class="chposx" chpos="8" style="display: none;">
      <div class="dhx_form_repeat"><label class="radiolabel display"><input class="dhx_repeat_radio chmod" mod="chdisplay" type="radio" text="poster" name="display4" value="1">poster　</label></div><input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic4" id="pic4" value="" style="display: inline-block;"><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="hidden" name="pic4Alt" id="pic4Alt" value="" style="display: inline-block;"><textarea class="dhx_repeat_radio chdisplay" chdisplay="1" name="notes4" placeholder=""></textarea>
      <div class="clear"></div><input class="dhx_repeat_radio chdisplay" chdisplay="1" type="text" name="url4" placeholder="url4" value="">
      <div class="clear"></div>
      <ul class="items sortablelist" id="v_pic4" data-listidx="3" chdisplay="1"></ul>
      <form action="upload.php" class="dropzone dz-clickable" id="pic4drop" chdisplay="1">
        <div class="dz-default dz-message"><button class="dz-button" type="button">Drop files here to upload</button></div>
      </form>
    </div>
  </div>
</div>

标签： css

解决方案

你真的需要使用float吗？我认为如果你需要一个类似表格的布局，你最好使用类似表格的标记grid，这样可以节省大量时间（和代码行）。请参阅网格完整指南

关于你的问题，让我们试试这个：

.my-container {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
}

.my-container > div:nth-child(odd) {
  text-align: right;
}

.cards {
  display: flex;
}

.cards > div {
  width: 100px;
  height: 150px;
  background: lightgray;
  border-radius: 10px;
}

.cards > div + div {
  margin-left: 8px;
}
<div class="my-container">

  <div>title</div>
  <div><input type="text"></div>


  <div>color</div>
  <div>
    <select name="" id="">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>

  <div></div>
  <div>
    <input type="text" placeholder="url1">
  </div>

  <div></div>
  <div class="cards">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

</div>

看？现在干净多了，因为你不需要所有这些<div class="dhx_wrap_section"> … <div>, <div class="clear"></div>，你也不必再使用float: left;了。所有现代浏览器都支持网格布局，请参阅caniuse.com。

推荐阅读