Question

我想要创建一个并排有2个项目的布局，每个项目有3列。第1列和第2列是固定宽度，第3列需要填充宽度的其余部分，并根据文本的需要增加高度。这两个并排项目将是父项div的50％分割。像下面的东西。

/// This view controller uses `AVFoundation` to play the videos from `FavoriteCollectionViewController`.
class PlayerViewControllerr: UIViewController {

    /// A button to allow the user to favorite and unfavorite a `Video`
    @IBOutlet weak var starButton: UIButton!

    /// This is passed from `FavoriteCollectionViewController`
    var favoriteList: FavoriteList!

    /// A copy of the `FavoriteList` videos to power the UI.
    var copiedList: List<Video>!

    var currentIndexOfVideoInCopiedList: Int!

    override func viewDidLoad() {
        super viewDidLoad()

        // Make a copy of the favoriteList to power the UI.
        var copiedVideos = [Video]()

        for video in favoriteList.videos {
            let unmanagedVideo = Video(value: video)
            copiedVideos.append(unmanagedVideo)
        }

        self.copiedList.append(copiedVideos)
    }

    // HELP: The app crashes here if I unfavorite a `Video`.
    @IBAction func didToggleStarButton(_ sender: UIButton) {
        // Do the unfavoriting and favoriting here.


        // An example of unfavoriting:
        let realm = try! Realm()
        try! realm.write {
            let videoToDeleteFromFavoriteList = favoriteList.videos[currentIndexOfVideoInCopiedList] /// Get the video that is currently playing
            realm.delete(videoToDeleteFromOriginalList)
        }

        // Update star button to a new image depending on if the `Video` is favorited or not.
        starButton.isSelected = //... update based on if the `Video` in the `FavoriteList` or not.
    }
}

当父div较小时

或者像这样

-------------------------------------------   ------------------------------------------- 
| col1 | col2 | col 3 with copy that wraps |  | col1 | col2 | col 3 with copy that wraps |
|               when there is lots of text |  |               when there is lots of text |
|               in this column             |  |               in this column             |
-------------------------------------------   -------------------------------------------

这很接近，但我真的不想在文本的第3列宽度上使用百分比。

https://jsfiddle.net/fractorr/htzyLupz/4/

Answer 1

如果使用bootstrap，则可以使用列分割方法并排布局

col-md-12

每一行都会被视为$.ajax({ url: "{{URL::to('match')}}/"+ id, type: 'POST', // dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)', data: { _method: 'PUT', match_id : id, start_time : newTime, competitionId: {{$cid}}, _token: '{{ csrf_token() }}' } })。通过调整列大小来规划如何使用列大小。 12是最大一半是6，依此类推。希望对你有所帮助。

如何创建包含3列的多项目并做出响应

1 个答案: