Question

我正在尝试创建一个连续多个3个div的页面，它们左右对齐。

我尝试使用import UIKit import SpriteKit import iAd class GameViewController: UIViewController, ADBannerViewDelegate { var SH = UIScreen.mainScreen().bounds.height let transition = SKTransition.fadeWithDuration(1) var UIiAd: ADBannerView = ADBannerView() override func viewDidLoad() { super.viewDidLoad() self.UIiAd.hidden = true self.UIiAd.alpha = 0 NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(GameViewController.hideBannerAd), name: "hideadsID", object: nil) NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(GameViewController.showBannerAd), name: "showadsID", object: nil) let scene = GameScene(size: view.bounds.size) let skView = view as! SKView print(view.bounds.size.height) print(view.bounds.size.width) skView.showsFPS = true skView.showsNodeCount = true skView.ignoresSiblingOrder = true scene.scaleMode = .ResizeFill //skView.showsPhysics = true skView.presentScene(scene) skView.showsPhysics = false } override func viewWillAppear(animated: Bool) { let BV = UIiAd.bounds.height UIiAd.delegate = self UIiAd.frame = CGRectMake(0, SH + BV, 0, 0) self.view.addSubview(UIiAd) } override func viewWillDisappear(animated: Bool) { UIiAd.delegate = nil UIiAd.removeFromSuperview() } func bannerViewDidLoadAd(banner: ADBannerView!) { let _ = UIiAd.bounds.height UIView.beginAnimations(nil, context: nil) UIView.setAnimationDuration(1) // Time it takes the animation to complete UIiAd.alpha = 1 // Fade in the animation UIView.commitAnimations() } func bannerView(banner: ADBannerView!, didFailToReceiveAdWithError error: NSError!) { UIView.beginAnimations(nil, context: nil) UIView.setAnimationDuration(1) UIiAd.alpha = 0 print("didnt work") UIView.commitAnimations() } func showBannerAd() { UIiAd.hidden = false let BV = UIiAd.bounds.height UIView.beginAnimations(nil, context: nil) UIView.setAnimationDuration(1) // Time it takes the animation to complete UIiAd.frame = CGRectMake(0, SH - BV, 0, 0) // End position of the animation UIView.commitAnimations() } func hideBannerAd() { UIiAd.hidden = true let BV = UIiAd.bounds.height UIView.beginAnimations(nil, context: nil) UIView.setAnimationDuration(1) // Time it takes the animation to complete UIiAd.frame = CGRectMake(0, SH + BV, 0, 0) // End position of the animation UIView.commitAnimations() } override func shouldAutorotate() -> Bool { return false } override func supportedInterfaceOrientations() -> UIInterfaceOrientationMask { if UIDevice.currentDevice().userInterfaceIdiom == .Phone { return .AllButUpsideDown } else { return .All } } override func prefersStatusBarHidden() -> Bool { return true }和var adBannerView: AdBannerView!，但结果非常糟糕。页面超级随机缩放，我希望当页面缩小时div会变成2列，然后移动设备变为1列。

func showAds(){
    NSNotificationCenter.defaultCenter().postNotificationName("showadsID", object: nil)
}

 d3.select("#sector")
  .transition().duration(2500)
  .attr("transform","translate(150,150)rotate("+angle+")");

jsFiddle：https://jsfiddle.net/azizn/j4cgef5g/

Answer 1

这是flexbox的教科书用例：

.container{
  display: flex; 
  justify-content: space-between;
}

以下是一个示例：http://codepen.io/memoblue/pen/XKQqGg

有许多方法可以处理响应方面，但我需要更具体地了解布局在不同断点处应该是什么样的，以便为您提供有用的答案......

Answer 2

查看下面的示例（CSS和HTML脚本）

<强> HTML

<div id='columns'>
    <div id='col1'></div>
    <div id='col2'></div>
    <div id='col3'></div>
</div>

<强> CSS

#columns{
    position: absolute;
    height: 100%;
    width: 100%;
}

#columns #col1{
    float: left;
    width: 33.33%;
    height: 100%;
}


#columns #col2{
    float: left;
    width: 33.33%;
    height: 100%;
}


#columns #col3{
    float: left;
    width: 33.33%;
    height: 100%;
}

@media media only screen and (max-width:1024px) and (min-width:540px){
    #columns #col1{
        width: 50%;
    }


    #columns #col2{
        width: 50%;
    }


    #columns #col3{
        width: 100%;
    }
}

@media media only screen and (max-width:540px){
    #columns #col1{
        width: 100%;
    }


    #columns #col2{
        width: 100%;
    }


    #columns #col3{
        width:  100%;
    }
}

注意我还没有真正测试过上面的例子，但它应该可行。您可以根据需要编辑宽度和高度值，以及媒体查询的宽度。随着屏幕变小，它会从显示中删除第3列和第2列，同时使其他列更大。要在左侧，中间和右侧位置制作三列，您不需要指定不同的浮点数，因为它们会在块中自动碰撞并在左侧堆叠，直到它们到达屏幕边缘。这也是宽度通常只有33.33％的原因，因为没有足够的空间，33.333％通常会使第三块被推下来。在大多数情况下，无论如何，0.01％的死区并不明显。

左，右和中心对齐的div

2 个答案: