Question

我想动态更改div元素的宽度值。 Div包含块，它们的大小取决于变量。例如，如果HList我有两个块在列中平均分开50/50％，如果是scala> import shapeless._, nat._, ops.nat._ import shapeless._ import nat._ import ops.nat._ scala> :paste // Entering paste mode (ctrl-D to finish) trait SumEq5[A] object SumEq5 { def apply[L <: HList](implicit ev: SumEq5[L]): SumEq5[L] = ev implicit def sumEq5AB[A <: Nat, B <: Nat, T <: HList] (implicit ev: Sum.Aux[A, B, _5]): SumEq5[A :: B :: T] = new SumEq5[A :: B :: T] {} } // Exiting paste mode, now interpreting. defined trait SumEq5 defined object SumEq5 scala> SumEq5[_0 :: _5 :: HNil] res0: SumEq5[_0 :: _5 :: HNil]] = SumEq5$$anon$1@658c5e59，那么我将有10个较小的块，依此类推......

这是我的刀片：

$t->spotdiff = 2

我试图使用Blade设置它（我实际上不确定表达式是否可以这样写）：

$t->spotdiff = 10

或者使用jQuery：

@foreach($test as $t)
...
<table>
...
<tr>
<td>
@for($i = 0; $ i < $t->spotdiff; $i++)
    <div id="modal" data-toggle="modal" data-target="#myModal" style="cursor:pointer;float:left;background:#c0c0c0;height:18px;margin-right:1px;"></div>@endfor<span style="color:#fd8809">{{$t->spotdiff}}
@endfor
</td>
</tr>
...
</table>
...
@endforeach

但没有成功。有什么想法吗？

Answer 1

如果您没有针对任何旧版浏览器，则可以轻松实现使用CSS和Flexbox平均扩展列的效果。这为您提供了代码和视图分离的优势。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="proj1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <h1>Project - 1</h1>
    <form id="form1" runat="server">
    <div>
         <table>
    <tr>
    <td class="auto-style1">Enter Your Text</td>
    <td>:</td>
    <td>
        <asp:TextBox ID="TextBox1" runat="server" Width="362px"></asp:TextBox>
        </td>
  </tr>
  <tr>
    <td class="auto-style1"></td>
    <td></td>
    <td>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
      </td>
  </tr>    
  <tr>
    <td class="auto-style1"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="auto-style1">
        <asp:Label ID="Label1" runat="server"></asp:Label>
      </td>
    <td></td>
      <td></td>
  </tr>    
  <tr>
    <td class="auto-style1"></td>
    <td></td>
      <td></td>
  </tr>
  <tr>
    <td class="auto-style1">
        <asp:Label ID="Label2" runat="server"></asp:Label>
      </td>
    <td>
        <asp:Label ID="Label5" runat="server"></asp:Label>
      </td>
      <td>
          <asp:Label ID="Label8" runat="server"></asp:Label>
      </td>
  </tr>
  <tr>
    <td class="auto-style1">
        <asp:Label ID="Label3" runat="server"></asp:Label>
      </td>
    <td>
        <asp:Label ID="Label6" runat="server"></asp:Label>
      </td>
      <td>
          <asp:Label ID="Label9" runat="server"></asp:Label>
      </td>
  </tr>
  <tr>
    <td class="auto-style1">
        <asp:Label ID="Label4" runat="server"></asp:Label>
      </td>
    <td>
        <asp:Label ID="Label7" runat="server"></asp:Label>
      </td>
      <td>
          <asp:Label ID="Label10" runat="server"></asp:Label>
      </td>
  </tr>

</table> 
    
    </div>
    </form>
</body>

</html>

.columns {
  display: flex;
}
.columns div {
  flex: 1;
  border: 1px solid red;
}

Answer 2

你有拼写错误，

1）直接方式

<div id="modal" style="width: {{(100 / $t->spotdiff)}}px"></div>

2）JQUERY WAY

<script type="text/javascript">
    $("#modal").css("width", "{{(100 / $t->spotdiff)}}px");
</script>

尝试一下，它会起作用。

使用表达式或jQuery在Laravel刀片中更改div宽度

2 个答案: