Question

我在页面中有一个网格系统，我希望其中一行包含2个列。列比行大。

示例：如果行的高度为20px，列的高度也为20px。

我希望列调整为该行，而不是独立运行。

let activityViewController = UIActivityViewController(activityItems: [NSLocalizedString("Hey! Download Nup from https://nupapp.gr", comment: "shared message")], applicationActivities: nil)

        activityViewController.excludedActivityTypes = [
            .postToWeibo,
            .postToTencentWeibo,
            .print,
            .airDrop,
            .copyToPasteboard,
            .assignToContact,
            .saveToCameraRoll,
            .addToReadingList,
            .postToFlickr,
            .postToVimeo,
            UIActivity.ActivityType(rawValue: "com.apple.mobilenotes.SharingExtension")
        ]

        self.present(activityViewController, animated: true, completion: nil)

        activityViewController.completionWithItemsHandler = { (activityType, completed, returnedItems, error) in
            print(activityType, completed, returnedItems, error)
            if completed && error == nil {
                // do something
            }
        }

<!--HTML-->
<div class="container-fluid">
      <div class="row">
        <div class="col-4"><img src="https://www.w3schools.com/images/w3schools_green.jpg"></div>
        <div class="col-8">
              dhfjk
              <br>fudff
              <br>udfhjdkl
        </div>
      </div>
</div>

Answer 1

您已将max-height:50指定给行，请删除cols等于row！

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    
}

<!--HTML-->
<div class="container-fluid">
      <div class="row">
        <div class="col-4"><img src="https://www.w3schools.com/images/w3schools_green.jpg"></div>
        <div class="col-8">
              dhfjk
              <br>fudff
              <br>udfhjdkl
        </div>
      </div>
</div>

Answer 2

也许可以帮助您

.col-4 {
    text-align: center; 
    padding: 0%;
    max-height: -webkit-fill-available;
     border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
    max-height: -webkit-fill-available;
    overflow: scroll;
}

.container-fluid{
    padding: 50px;
}

.row {
    border: 5px solid green;
    max-height: 50px;
}

.row:nth-of-type(2){
   max-height: -webkit-fill-available;
    overflow: scroll
}

img{
    max-height: inherit;
}

Answer 3

只需使用此CSS

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
     padding: 7px;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    max-height: 200px;
}

如何调整行到列？

3 个答案: