如何在较小的屏幕中调整两个浮点div

Question

我正在使用此JSON代码

从HTML创建一个列表

.list {
  list-style-type: none;
}

div.description {
  float: left;
  overflow: auto;
}

div.link {
  float: right;
  overflow: auto;
}

.row1,
.row2 {
  clear: both;
}

<ul class="list" id="dataList"></ul>
<div id="item">
  <div class="row1">
    <div class="description"></div>
    <div class="link"></div>
  </div>
</div>

描述可能很长但链接很短。在小屏幕中，两个div不再平行，并且不可能区分哪个链接对应于哪个描述。

我该如何解决这个问题？我试图使用浮动左，但两个div有时会粘在一起，有时不会，并且它看起来不会更好。而且我不确定如何仅为移动设备做到这一点。

我认为这是一个众所周知的问题。我该如何解决这个问题？

修改 在大屏幕中，它看起来像this，我的小屏幕看起来像this

Answer 1

您可以为两个元素提供一些宽度，如下所示：

＆＃13;

＆＃13;

ul {
 list-style-type: none;
}

div.description {
  float: left;
  overflow: auto;
  max-width:85%;
}

div.link {
  float: right;
  overflow: auto;
  max-width: 15%;
  text-align: right;
}

.row1,
.row2 {
  clear: both;
}

＆＃13;

<ul class="list" id="dataList"></ul>
<div id="item">
    <div class="row1">
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
        <div class="link">Lorem</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这可能看起来很奇怪，但是在内容之前放置正确的浮动项目（按照HTML顺序）并从描述中删除float: left;将解决您的问题。我只添加了一点保证金，以便链接与描述有点分开，否则它会坚持下去。

注意：使用此解决方案，无需精确任何宽度，它将适应所有尺寸。

.list {
  list-style-type: none;
}

div.description {
  overflow: auto;
}

div.link {
  float: right;
  margin-left: 10px;
  overflow: auto;
}

.row1,
.row2 {
  clear: both;
}

<ul class="list" id="dataList"></ul>
<div id="item">
    <div class="row1">
        <div class="link">Lorem</div>
        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
    </div>
</div>

Answer 3

＆＃13;

＆＃13;

.image{display:table-cell; vertical-align:middle}
.image a img{width: 100%; max-width: 200px}
.content{vertical-align:middle; display:table-cell; width:400px;}
.content1{float:right;}

＆＃13;

<div class="Container">
    <div class="image">
        <a>
            <p>test</p>
             <img></img>
        </a>
    </div>
    <div class="content">
        <div class="content1"><p>test</p></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;