Question

我有一个HTML表格，我希望以三列布局显示数据。我在这附近有一些东西：https://jsfiddle.net/j89cttva/1/

但是我希望将这些空白排除在顶部以浓缩所有空白空间。有人可以帮忙吗？

 // retrieve file of the custom field 
 $file = get_post_meta(get_the_ID(), 'wp_custom_attachment', true); 

 //get the url
 $url = $file['url'];

 //Replace url to directory path
  $path = str_replace( site_url('/'), ABSPATH, esc_url( $url) );

  if ( is_file( $path ) ){
    $filesize = size_format( filesize( $path ) );
    $filename = basename($path); 
  }

            echo '<p>Name: ' . $filename . '</p>';
            echo '<p>Size: ' . $filesize . '</p>';

Answer 1

这是否是您必须使用表格的作业？如果没有，表格不是正确的工具。

我想练习flexbox，所以我把它放在一起。 Flex容器上的高度是一个黑客，它使它包裹，但我不知道你的周围代码，也许你已经高度限制。

https://jsfiddle.net/dgrogan/ua4cn5d8/

我想练习multicol - https://jsfiddle.net/dgrogan/jLsgpxy1/

此代码为flex：

body {
  font-size: 12px;
}

#container {
  outline: 1px solid pink;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:300px; /* otherwise this container can grow down indefinitely*/
}

.section {
  outline: 1px solid lightblue;
  width: 30%;
}

<div id="container">
  <div class="section">
    <b>Comfort_Features:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Rear Center Folding With Storage and Pass-Thru Armrests</li>
      <li>Carpet Floor Mats</li>
      <li>Carpet Floors</li>
      <li>Front Floor Mats</li>
      <li>Chrome Interior Accents</li>
      <li>Simulated Alloy Shift Knob Trim</li>
      <li>Urethane Steering Wheel Trim</li>
    </ul>
  </div>
  <div class="section">
    <b>Drivetrain:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>4.11 Axle Ratio</li>
    </ul>
  </div>
  <div class="section">
    <b>Engine:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>140 Amps Alternator</li>
      <li>600 Cca Battery Rating</li>
      <li>Battery Saver</li>
      <li>Maintenance-Free Battery</li>
      <li>50 State Emissions</li>
      <li>Auxiliary Oil Cooler</li>
    </ul>
  </div>
  <div class="section">
    <b>In_Car_Entertainment:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Uconnect Infotainment</li>
    </ul>
  </div>
  <div class="section">
    <b>Instrumentation:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Clock</li>
      <li>Digital Odometer</li>
      <li>Driver Information System</li>
      <li>External Temperature Display</li>
      <li>Tachometer Gauge</li>
      <li>Multi-Function Display</li>
      <li>Trip Computer</li>
      <li>2 Trip Odometer</li>
      <li>Low Fuel Level Warnings and Reminders</li>
    </ul>
  </div>
  <div class="section">
    <b>Lights:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Daytime Running Lights</li>
      <li>Auto Delay Off Headlights</li>
      <li>Led Taillights</li>
    </ul>
  </div>
</div>

三列布局的HTML表格式

1 个答案: