在 div 上使用可调整大小的函数将另一个 division 移动到下一行

Question

我对 javascript/Html/CSS 非常陌生，必须使用它在现有网站之一中添加小功能。我计划有一个可调整大小的分区，这样如果我们在分区的左侧有一个更大的 image/drawing，它就可以调整大小。分区的右侧是文本。我使用了 resizable() 函数，当我调整第一个分区的大小时，另一个分区进入一个新行。我不确定如何解决这个问题。当页面加载时，我需要背景部分有 50% 的宽度和文本字段有 47.5%。但是，在调整背景分区的大小时 - 文本字段应自动调整其宽度。

编辑：修复了 html 拼写错误问题。

代码：https://jsfiddle.net/yguw/t3e9xgbg/

请建议我如何解决这个问题。

<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="../css/test.css">
<link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.11.4.min.css">
<link rel="stylesheet" type="text/css" href="../css/menu.css">
<link rel="stylesheet"  href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
  $("#background").resizable();
});

</script>
</head>

<body>
<!-- Code block start - NT -->
<div class="topbar">
 <div class="topbarleft">
  <div class="searchbarleft">
    <p>testing</p>
  </div>
  <div class="searchbarright">
    <input type="text" id="box" name="fname" size="50">
  </div>
 </div>
 <div class="topbarright">
  <div class="topbarleft">
  </div>
  <div class="topbarright">
    <a href='/test/r/signout' style='color:white;'>SignOut</a>
  </div>
  </div>
</div>
<div class="mainDiv">
<div id="background" class="background"></div>
<div id="textField" class="textField">
</div>
</div>
<!--<script type="text/javascript" src="../js/testYG.js"></script> -->

</body>


<div class="mainDiv">
<div id="resizable" class="background" id="background"></div>
<div id="resizable" class="textField" id="textDivField">
</div>
</div>
</html>

Answer 1

而不是浮动，你可以使用 display: table 或 flex 来绘制一行。

    $(function() {
      $("#background").resizable();
    });

.mainDiv {
  height: relative;
  display:table;
  width:100%;
}

:root {
  background: 900px;
  position: relative;
}

#background {
  background-color: rgb(255, 200, 240);
  height: 50vh;
  width:50%;
  display:table-cell;
  margin: 0;
}

#textField {
  background-color: rgb(240, 240, 200);
  display:table-cell;
  padding: 1%;
}

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 

  <div class="topbar">
    <div class="topbarleft">
      <div class="searchbarleft">
        <p>testing</p>
      </div>
      <div class="searchbarright">
        <input type="text" id="box" name="fname" size="50">
      </div>
    </div>
    <div class="topbarright">
      <div class="topbarleft">
      </div>
      <div class="topbarright">
        <a href='/test/r/signout' style='color:white;'>SignOut</a>
      </div>
    </div>
  </div>
  <div class="mainDiv">
    <div id="background" class="background"></div>
    <div id="textField" class="textField">
    </div>
  </div>

$(function() {
  $("#background").resizable();
});

.mainDiv {
  height: relative;
  display: flex;
}
:root {
  background: 900px;
  position: relative;
}
#background {
  background-color: rgb(255, 200, 240);
  height: 50vh;
  width: 50%;
  margin: 0;
}
#textField {
  background-color: rgb(240, 240, 200);
  position: relative;
  flex: 1;
  padding: 1%;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<div class="topbar">
  <div class="topbarleft">
    <div class="searchbarleft">
      <p>testing</p>
    </div>
    <div class="searchbarright">
      <input type="text" id="box" name="fname" size="50">
    </div>
  </div>
  <div class="topbarright">
    <div class="topbarleft">
    </div>
    <div class="topbarright">
      <a href='/test/r/signout' style='color:white;'>SignOut</a>
    </div>
  </div>
</div>
<div class="mainDiv">
  <div id="background" class="background"></div>
  <div id="textField" class="textField">
  </div>
</div>

在 div 上使用可调整大小的函数将另一个 division 移动到下一行

using resizable function on div moves the other division to next line

html

javascript

css

resize