4＆＃39; div不能水平对齐

时间：2017-07-31 10:43:04

标签： html css css3 flexbox

问题是我想让4个盒子像卡片一样水平排列，但结果就像楼梯一样请帮忙

有99行所以请访问这里 jsfiddle 

TEST(FirstB, TestCall) {
    using ::testing::_;
    MockA a;
    EXPECT_CALL(a, ShowPubA2(_)).Times(AtLeast(1));
    B b(a);
    EXPECT_EQ(2, b.ShowPubB2(2));
}

7 个答案:

答案 0 :(得分：3)

请尝试 DEMO

从css中删除第一，第二，第三和第四... nth，在 .card-container

下面添加这些内容 
.card-container {
    float: left;
    width: calc(100%/4);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    align-content: center;
}


body {
				font-family:Arial, Helvetica, sans-serif;
				font-size:36px;
			}
			h1 {
				margin:0;
			}
	
			.card-container {
				perspective:700;	
			}
			.card {
				position:relative;
				color:white;
				text-align:center;
				line-height:200px;
				margin:20px;
				width:200px;
				height:200px;
				transition:all 0.6s ease;
				transform-style:preserve-3d;
			}
			.front, .back {
				background-color:#5677fc;
				position:absolute;
				top:0;
				left:0;
				width:200px;
				height:600px;
				backface-visibility:hidden;	
			}
			.back {
				transform:rotateY(180deg);					
			}
			.card:hover {
				transform:rotateY(180deg);
			}
      .card-container {
    float: left;
    width: calc(100%/4);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    align-content: center;
}
<body>
    	<div class="card-container" id="first">
    		<div class="card">
            	<div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
        
        <div class="card-container" id="second">
    		<div class="card">
            	<div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
        
        <div class="card-container" id="third">
    		<div class="card">
            	<div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
        
        <div class="card-container" id="forth">
    		<div class="card">
            	<div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
    </body>

答案 1 :(得分：0)

从css中删除第一，第二，第三和第四......第n ，在ContainerAwareCommand下面添加这些内容。

namespace AppUserBundle\Command;

use Symfony\Bundle\FrameworkBundle\Command\ContainerAwareCommand;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
use Symfony\Component\Console\Input\InputArgument;
use AppUserBundle\Services\ProfileImageGenerator;
use PcMagas\AppImageBundle\Filters\Crop\CropParams;

class CreateProfileImageCommand extends ContainerAwareCommand
{
    protected function configure()
    {
        $this->setName('appsuserbundle:create:profile:image')
            ->setDecrtiption("Process a file image like image profile.")
            ->setHelp("This command allows you to generate a file like a process image.")
            ->addArgument('file',InputArgument::REQUIRED,'The image file to process.');
    }

    protected function execute(InputInterface $input, OutputInterface $output)
    {
        $file=$input->getArgument('file');

        /**
         * @var AppUserBundle\Services\ProfileImageGenerator $container
         */
        $imageGenerator=$this->getContainer()->getDefinition('app_user.thumbnail_generator');

        $cropParams=new CropParams(5,5,10,10);
        $file=null;//How To emulate an uploadedfile with realData?
        $processedFile=$imageGenerator->process($file,[ProfileImageGenerator::CROP_PARAMS=>$cropParams])
    }
}

以下是result

希望有所帮助，

答案 2 :(得分：0)

你只需要一个容器作为弹性箱。

＆＃13;
＆＃13; 
.card-container {
  display: flex;
  perspective: 700;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
}

h1 {
  margin: 0;
}

.card {
  position: relative;
  color: white;
  text-align: center;
  line-height: 200px;
  margin: 20px;
  width: 200px;
  height: 200px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front,
.back {
  background-color: #5677fc;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 600px;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

.card:hover {
  transform: rotateY(180deg);
}
＆＃13; 
<div class="card-container">
  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>

  <div class="card">
    <div class="front">
      <h1>hello</h1>
    </div>
    <div class="back">
      <h1>Goodbye</h1>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

见：

＆＃13;
＆＃13; 
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  line-height: 60px
}

h1 {
  margin: 0;
  padding-top: 50px
}

.card-container {
  perspective: 700;
  float: left;
  width: 25%;
  word-break: break-word;
}

.card {
  position: relative;
  color: white;
  text-align: center;
  margin: 20px;
  width: 100%;
  height: 200px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front,
.back {
  background-color: #5677fc;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

.card:hover {
  transform: rotateY(180deg);
}
＆＃13; 
<div class="card-container" id="first">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>

  <div class="card-container" id="second">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>

  <div class="card-container" id="third">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>

  <div class="card-container" id="forth">
    <div class="card">
      <div class="front">
        <h1>hello</h1></div>
      <div class="back">
        <h1>Goodbye</h1></div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

我不使用flex，因为它在IE9及更早版本中不支持。

我使用float：

body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:36px;
  text-align: center;
}

h1 {
  margin:0;
}

.card-container {
  perspective:700; 
  float: left; 
}

.card {
  position:relative;
  color:white;
  text-align:center;
  line-height:200px;
  margin:20px;
  width:200px;
  height:200px;
  transition:all 0.6s ease;
  transform-style:preserve-3d;
}

.front, .back {
  background-color:#5677fc;
  position:absolute;
  top:0;
  left:0;
  width:200px;
  height:600px;
  backface-visibility:hidden; 
}

.back {
  transform:rotateY(180deg);          
}

.card:hover {
   transform:rotateY(180deg);
}

.wrapper {
  display: inline-block;
}
<div class="wrapper">

  <div class="card-container" id="first">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
        
  <div class="card-container" id="second">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
        
  <div class="card-container" id="third">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
          
  <div class="card-container" id="forth">
    <div class="card">
      <div class="front"><h1>hello</h1></div>
      <div class="back"><h1>Goodbye</h1></div>
    </div>
  </div>
  
</div>

Fiddle

答案 5 :(得分：0)

您可以简单地在所有卡片容器周围添加一个新容器，并使用flexbox水平对齐所有卡片容器：

Here是一个有效的例子。

这是代码： HTML：            

        <div class="card-container" id="first">
            <div class="card">
                <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>

        <div class="card-container" id="second">
            <div class="card">
                <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>

        <div class="card-container" id="third">
            <div class="card">
                <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>

        <div class="card-container" id="forth">
            <div class="card">
                <div class="front"><h1>hello</h1></div>
                <div class="back"><h1>Goodbye</h1></div>
            </div>
        </div>
        </div>
    </body>

CSS：

body {
                font-family:Arial, Helvetica, sans-serif;
                font-size:36px;
            }
            h1 {
                margin:0;
            }
                #first {
                    display: flex;
                    justify-content: center;
                    margin-left:10px;
                    margin-top:20px;
                }
                #second {
                    display: flex;
                    justify-content: center;
                    margin-left:220px;
                    margin-top:20px;
                }
                #third {
                    display: flex;
                    justify-content: center;
                    margin-left:430px;
                    margin-top:20px;
                }
                #forth {
                    display: flex;
                    justify-content: center;
                    margin-left:640px;
                    margin-top:20px;
                }
            .card-container {
                perspective:700;    
            }
            .card {
                position:relative;
                color:white;
                text-align:center;
                line-height:200px;
                margin:20px;
                width:200px;
                height:200px;
                transition:all 0.6s ease;
                transform-style:preserve-3d;
            }
            .front, .back {
                background-color:#5677fc;
                position:absolute;
                top:0;
                left:0;
                width:200px;
                height:600px;
                backface-visibility:hidden; 
            }
            .back {
                transform:rotateY(180deg);                  
            }
            .card:hover {
                transform:rotateY(180deg);
            }

      .container {
        display: flex;
        flex-direction: row;
      }

答案 6 :(得分：0)

你可以使用一个类来为所有div设置样式，因为它们都具有相同的样式，因此不需要四次编写相同的css。

  

在Html中，div位于块级元素之下，意味着当您使用多个div时，下一行将在下一行中显示第一行是否有空格。要使它们在一行对齐，请使用CSS属性ie- float: left

只需替换代码的这些行 - 

             #first {
                  float:left;
                    display: flex;
                    justify-content: center;
                    margin-left:10px;
                    margin-top:20px;
                }
                #second {
                  float:left;
                    display: flex;
                    justify-content: center;
          margin-left:10px;
                    margin-top:20px;
                }
                #third {
                  float:left;
                    display: flex;
                    justify-content: center;
          margin-left:10px;
                    margin-top:20px;
                }
                #forth {
                  float:left;
                    display: flex;
                    justify-content: center;
                    margin-left:10px;
                    margin-top:20px;
                }
            .card-container {
                perspective:700;    
            }

这几行 - 

.card-container {
                float:left;
                    display: flex;
                    justify-content: center;
                    margin-left:10px;
                    margin-top:20px;
                perspective:700;    
            }
相关问题
最新问题