Question

当我向.innerright添加动态内容时。为什么.a的宽度不会动态增加。我该怎么做才能确保.a动态获取.innerright容器的宽度。我使用javascript代码动态添加内容。

＆＃13;

var list = '';
for (var i = 0; i < 100; i++) {
  list = list + i + 's';
}

$('.innerright').append(list);

＆＃13;

.outer {
  width: 500px;
  height: 200px;
  background-color: red;
}
.innerleft {
  width: 20%;
  float: left;
  height: 100%;
  background-color: yellow;
}
.innerright {
  width: 80%;
  height: 100%;
  float: left;
  background-color: green;
  overflow: scroll;
}
.a {
  height: 20px;
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer">
  <div class='innerleft'>

  </div>
  <div class='innerright'>
    <div class="a">

    </div>
  </div>
</div>

＆＃13;

Answer 1

这是因为您在容器元素上设置了计算宽度，并通过添加滚动条专门告诉容器处理溢出内容。

就css而言，元素始终处于计算宽度，额外内容只是扩展到溢出区域而不是影响容器的宽度。

我不确定在保持溢出属性滚动的同时单独使用css是可以修复的。一切都在按照应有的方式进行，元素占据了应该采取的宽度，并且在整个动态内容编辑过程中保持不变 - 溢出不是宽度的一部分。

您可以使用javascript scrollWidth值并使用它来动态编辑.a元素的宽度。

请参阅fiddle here

重要的一点是：

$('.a').width($('.innerright')[0].scrollWidth);

获取.innerright元素的滚动宽度，包括宽度和溢出，并使用它来设置.a元素的宽度，该元素现在也进入溢出区域。 / p>

当然，在添加任何动态内容后，您需要致电并召回这个内容！

注意，[0]表示获取JQuery调用返回的DOM节点数组中的第一个元素。

Answer 2

正如其他人指出的那样，块元素不会增长，它们会溢出。你的CSS使溢出可以滚动。为了实现您的目标，请将内容（import java.io.*; import java.net.*; import java.util.*; import java.math.*; public class OBS_Client_11398 { public static void main(String args[]) throws Exception { Socket OBS_Socket; boolean acFlag = false; boolean pwdFlag = false; String strpasswd = null; int passwd = 0; Scanner scn = new Scanner(System.in); PrintWriter pwd = null; Scanner sc = null; String res = null; do { acFlag = false; do { pwdFlag = false; try { System.out.println(" * * * * OMANTEL BILLING SERVICE * * * * "); System.out.println("\nPlease enter your OBS Account Number : "); strpasswd = scn.nextLine(); passwd = Integer.parseInt(strpasswd); if (strpasswd.length() != 4) { // System.out.println(strpin.length()); pwdFlag = true; } } catch (Exception e) { // e.printStackTrace(); System.out.println("Error! Please Enter a Password with 4 Digits Only.."); pwdFlag = true; } } while (pwdFlag); OBS_Socket = new Socket("localhost", 5555); pwd = new PrintWriter(OBS_Socket.getOutputStream(), true); pwd.println(strpasswd); sc = new Scanner(OBS_Socket.getInputStream()); res = sc.next(); if (res.equals("Failed")) { System.out.println("ERROR! You have Entered an Invalid Account Number"); acFlag = true; } } while (acFlag); if (res.equals("Successful")) { boolean chFlag = false; do { chFlag = false; System.out.println("\n * - - - - - - - - - - - - - - - - - *"); System.out.println(" * *"); System.out.println(" * WELCOME TO OMANTEL BILLING SERVICE *"); System.out.println(" * Programmed by: Sania Macci - 11398 *"); System.out.println(" * *"); System.out.println(" * Choose an Option from the list below *"); System.out.println(" * --> 1 <-- View Bill *"); System.out.println(" * --> 2 <-- Pay Bill *"); System.out.println(" * --> 3 <-- Check Balance *"); System.out.println(" * --> 4 <-- Change Password *"); System.out.println(" * --> 5 <-- Exit *"); System.out.println(" * *"); System.out.println(" * - - - - - - - - - - - - - - - - - *"); System.out.print("\nSelected Option : "); Scanner sc1 = new Scanner(System.in); int ch = 0; try { Scanner scCH = new Scanner(OBS_Socket.getInputStream()); PrintWriter pw1 = new PrintWriter(OBS_Socket.getOutputStream(), true); ch = sc1.nextInt(); System.out.println(ch); if (ch == 1) { scCH = new Scanner(OBS_Socket.getInputStream()); pw1.println(ch + "-" + "0"); System.out.println(""); System.out.println(" * * * * VIEW BILL * * * * "); System.out.println("This bill will be Updated after every Transaction"); System.out.println(""); System.out.print(scCH.nextLine()); } else if (ch == 2) { scCH = new Scanner(OBS_Socket.getInputStream()); pw1.println(ch + "-" + "2"); System.out.println(""); System.out.println(" * * * * PAY BILL * * * * "); BigDecimal totalBill = new BigDecimal(scCH.nextLine()); Scanner scanner = new Scanner(System.in); System.out.println("Enter Amount to Pay: "); BigDecimal amount = new BigDecimal(scanner.nextLine()); totalBill = totalBill.subtract(amount, new MathContext(5)); pw1.println(totalBill); } else if (ch == 3) { pw1.println(ch + "-" + "3"); System.out.println(""); System.out.println(" * * * * CHECK BALANCE * * * * "); scCH = new Scanner(OBS_Socket.getInputStream()); System.out.print(scCH.nextLine()); } else if (ch == 4) { scCH = new Scanner(OBS_Socket.getInputStream()); System.out.print("Please Enter a New Password: "); int pinNum = sc1.nextInt(); pw1.println(ch + "-" + pinNum); System.out.print(scCH.nextLine()); } else if (ch == 5) { pw1.println(ch + "-" + "0"); scCH = new Scanner(OBS_Socket.getInputStream()); System.out.print(scCH.nextLine()); System.exit(-1); } else { System.out.print("WRONG CHOICE!! Please try again...\n"); chFlag = true; } Scanner scanner = new Scanner(System.in); String readString = scanner.nextLine(); if (readString.equals("")) { chFlag = true; } } catch (java.util.InputMismatchException e) { System.out.println("Wrong Choice! Please try again\n"); chFlag = true; } catch (Exception e) { // e.printStackTrace(); } } while (chFlag); } } }和文本）包含在内联块元素中，该元素将会增长，现在您<a>会收到它的父母（增长）宽度，<a>仍然可以滚动溢出：

＆＃13;

<div>

＆＃13;

var list = '';
for (var i = 0; i < 100; i++) {
  list = list + i + 's';
}

$('.contentspan').append(list);

＆＃13;

.outer {
  width: 500px;
  height: 200px;
  background-color: red;
}
.innerleft {
  width: 20%;
  float: left;
  height: 100%;
  background-color: yellow;
}
.innerright {
  width: 80%;
  height: 100%;
  float: left;
  background-color: green;
  overflow: scroll;
}
.a {
  height: 20px;
  border: 1px solid red;
}
.contentspan {
  display: inline-block;
}

＆＃13;

顺便说一句，这与动态内容或JS无关。如果文本在HTML中内嵌，则会得到完全相同的结果。

当动态内容添加到外部容器时，为什么内部元素宽度不会增加

2 个答案: