Question

有没有人知道如何让我的行和列表移动响应。我从数据库中插入数据，但它们不是移动响应。 element1和content1 id用于元素的背景。你能告诉我如何让我的行和列表移动响应吗？

这是我的html和php：

    <section>

    <table>

            <tr>
            <?php 
                $counter = 0;
                while($product = mysqli_fetch_assoc($featured)){
                    if($counter % 4 == 0){
                        echo '</tr><tr>';
                    }
                    ++$counter;
                    ?>
                    <td>
                    <div id="element1"></div>
                    <div id="content1">
                        <img src="<?= $product['image']; ?>" alt="<?=         $product['title']; ?>">
                        <h4><?= $product['title']; ?></h4>
                        <hr>
                        <p class="description"><?= $product['description']; ?></p>

            <!--------BUTTON READ MORE-------->

            <div id="hovers">
                <a href="<?php echo $product['href']?>" class="button" target="_blank">
                    <span class="contentbut"> Read More</span>
                </a>
            </div>
                    </td>
                    <?php
                }
            ?>
            </tr>
        </div>
    </table>    
    </section>

这是我的css：

#element1{
    position: relative;
    z-index:1;
    width:320px;
    height:380px;
    text-align:left;

    background: url('../interviewsbackground.png') no-repeat center;
    border:#F90 2px solid;

}

#content1{
    position:relative;
    z-index:2;
    top: -380px;
    width:290px;
    color:#FFF;
    text-align:left;
    margin:34px;
    margin-bottom:-240px;
}


    /*-------------------------3D BUTTONS-----------------*/
    .button{
    display:block;
    width:120px;
    height:45px;
    position:relative;
    border:2px solid #04a;
    margin: 0px 0px;
    border-radius:5px;
     }

    .button .contentbut{
    display:block;
    position:absolute;
    bottom:6px;
    width:100%;
    height:100%;
    line-height:50px;
    background-color:#09f;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    box-shadow: 0 6px 0 #06c;
    border-radius:5px;
    transition:all 0.ls linear;
     }

Answer 1

嗯，你有两个简单的选择。您可以在css中使用百分比宽度/高度（例如对所有宽度都这样做），或者您可以在css中查看媒体定位，这更复杂，但可以提供更好的设计结果。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

您可能还想查看断点，尽管这是另一个更复杂的步骤。百分比可能就足够了。

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Answer 2

在您的情况下，答案是放弃表格并使用列表+媒体查询+弹性框。您显示的不是表格数据。它将清除你只需吐出4行的需要，并允许你使用更多的屏幕尺寸。

https://jsfiddle.net/sheriffderek/0egLgmge/

这不会使用您的确切内容 - 但我会从另一个答案中重新使用它 - 我认为这将说明问题。：）

标记

<ul class='thing-list'>

  <li class='thing'>
    <a class='link' href='#'>
      <figure>
        <img src='https://placehold.it/800x1000' alt='thing poster'>
      </figure>
      <h1 class='title'>Title</h1>
      <div class='rating'>
        xxx
      </div>
    </a>
  </li>

  ...

样式

/* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a { /* removes link defaults */
  text-decoration: none; 
  color: inherit;
}

figure {
  margin: 0;
}

figure img { /* make img's in figures responsive to their parent */
  display: block;
  width: 100%;
  height: auto;
}

.thing-list {
  display: flex;
  flex-direct: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.thing-list .thing {
  flex-basis: 100%;
  background: rgba(0,0,0,.1);
  margin-bottom: 30px;
}

@media (min-width: 500px) {
  .thing-list .thing {
    flex-basis: 48%; /* these are very rough... */
  }
}

@media (min-width: 900px) {
  .thing-list .thing {
    flex-basis: 30%;
  }
}

.thing-list .thing .link {
  display: block; /* this has children that are block - so it HAS to be block */
}

.thing-list .thing figure {
  /* */
}

.thing-list .thing .title {
  margin: 0;
  padding: 10px;
  font-size: 16px;
  background: lightgreen;
  color: white;
}

.thing-list .thing .rating {
  padding: 10px; /* you can use flexbox for these stars too */
}

如何使我的行表响应

2 个答案: