Question

此处的完整示例：https://codepen.io/ScottBeeson/pen/BmxLxL

＆＃13;

 Exception in thread "main" org.apache.spark.sql.streaming.StreamingQueryException: Connection
 refused
 === Streaming Query ===
 Identifier: [id = 2bdde43c-319d-48fc-941a-e8d794294a1d, runId = 8b1fd51e-b610-497b-b903-d66367856302]
 Current Committed Offsets: {}
 Current Available Offsets: {}

 Current State: INITIALIZING
 Thread State: RUNNABLE
    at org.apache.spark.sql.execution.streaming.StreamExecution.org$apache$spark$sql$execution$streaming$StreamExecution$$runBatches(StreamExecution.scala:343)
    at org.apache.spark.sql.execution.streaming.StreamExecution$$anon$1.run(StreamExecution.scala:206)
 Caused by: java.net.ConnectException: Connection refused
    at java.net.PlainSocketImpl.socketConnect(Native Method)
    at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)
    at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)
    at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)
    at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
    at java.net.Socket.connect(Socket.java:589)
    at java.net.Socket.connect(Socket.java:538)
    at java.net.Socket.<init>(Socket.java:434)
    at java.net.Socket.<init>(Socket.java:211)

＆＃13;

$('#btnAddBox').on('click', function() {
  $('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click', function() {
  $('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})

＆＃13;

body {
  margin: 40px;
}

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  display: grid;
  grid-template-rows: 23px;
  grid-auto-rows: 23px;
  grid-template-columns: repeat(4, 23px);
  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 0px;
  font-size: 100%;
}

#btnAddBox {
  position: absolute;
  top: 5px;
  left: 105px;
  cursor: pointer;
  background-color: gray;
  color: white;
  padding: 4px;
}

#btnReset {
  position: absolute;
  top: 35px;
  left: 105px;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 4px;
}

＆＃13;

我使用CSS Grid作为仪表板。可以添加和删除切片。现在我使用以下内容创建一个正方形网格：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>

这样可行，但如果我添加或删除图块，则包装器的高度不会相应调整。我怎么能这样做？

Answer 1

您可以使用grid-auto-rows。这不需要您预先指定行数grid-template-rows。这使得它随着尺寸不断增加而自动调整。

由于您的列已修复，因此您可以将grid-template-columns与repeat(4)一起使用。如果您想增加列，那么您可以使用grid-auto-columns以类似的方式实现它。

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0; left: 0; width: 100px;
  display: grid;

  /* Added these */
  grid-template-columns: repeat(4, 23px);
  grid-auto-rows: 23px;
  /* Added these */      

  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

$('#btnAddBox').on('click',function() {
  $('.wrapper').append('<div class="box"></div>');
})
$('#btnReset').on('click',function() {
  $('.wrapper').html('<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>');
})

body {
  margin: 40px;
}

.wrapper {
  box-sizing: border-box;
  position: absolute;
  top: 0; left: 0; width: 100px;
  display: grid;
  
  grid-template-columns: repeat(4, 23px);
  grid-auto-rows: 23px;
  grid-gap: 2px;
  background-color: #fff;
  color: #444;
  border: 1px solid blue;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 0px;
  font-size: 100%;
}

#btnAddBox {
  position: absolute;
  top: 5px; left: 105px;
  cursor: pointer;
  background-color: gray;
  color: white;
  padding: 4px;
}
#btnReset {
  position: absolute;
  top: 35px; left: 105px;
  cursor: pointer;
  background-color: red;
  color: white;
  padding: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div id='btnAddBox'>+ Add Box</div>
<div id='btnReset'>Reset</div>

具有动态高度的CSS正方形网格？

1 个答案: