3列布局，中间列的响应宽度为

Question

所以这是我想要为列表中的行实现的布局，

左栏有一个图标，其大小固定为35像素。

中间栏会有文字。并且根据屏幕尺寸，列的宽度应该增加/减少。

最后一栏也有文字。本文不应该分成第二行。列应该采用其中内容的宽度。

据我了解， 这是HTML，

<div class="row">
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col-3"></div>
</row>

和CSS，

.row { width:100%; }

.col-1 { width:35px; }

.col-2 { width:80%; }

.col-3 { width:10%; }

这不能给我预期的结果。有人能告诉我它是如何完成的。

Answer 1

您可以使用flexbox

@NodeEntity
public class User{
    Long id;
}

@NodeEntity
public class Follows{
    private Long Id;
    @Relationship(type="FOLLOWER")
    private User follower;
    @Relationship(type="FOLLOWEE")
    private User followee;
    private Date from;

    public Follows(){}
    public Follows(User u1, User u2){
         this.follower = u1;
         this.followee = u2;
    }
}

....
//Placed in userService
Follows createFollowsRelationship(User u1, User u2){
   return followsRepository.save(new Follows(user1, user2));
}
.....

https://jsfiddle.net/bkqgzghb/1/

Answer 2

Flexbox可以解决大部分问题。

  

最后一栏也有文字。本文不应该分成第二行。该列应该采用其中内容的宽度。

为此，您需要将white-space:no-wrap添加到相关的div。

请注意，这可能会导致屏幕尺寸较小的问题。

JSfiddle Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.row {
  display: flex;
  margin-bottom: 10px;
}
.col-1 {
  width: 35px;
  background: red;
}
.col-2 {
  flex: 1;
  background: blue;
}
.col-3 {
  background: green;
  white-space: nowrap;
}

<div class="row">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-3">
    <p>Lorem ipsum dolor sit amet!</p>
  </div>
</div>

<div class="row">
  <div class="col-1"></div>
  <div class="col-2"></div>
  <div class="col-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, similique!</p>
  </div>
</div>