Question

我使用bootstrap，我想创建2个div。

1 - 内容div（信息部分） 2 - 带背景图像的div（封面块）

但我有问题。我不能设置height1 = height2。我的代码：

use Aws\S3\S3Client;

// Instantiate the S3 client with your AWS credentials
$s3Client = S3Client::factory(array(
  'key'    => '...',
  'secret' => '...',
  'signature' => 'v4',
  'region'=>'eu-west-1'
));

if(isset($_POST["Submit"])) {

  $check = getimagesize($_FILES["theFile"]["tmp_name"]);

  if($check) {

    $newFileName = time().'_'.strtolower($_FILES["theFile"]["name"]);

    // Upload an object by streaming the contents of a file
    // $pathToFile should be absolute path to a file on disk
    $result = $s3Client->putObject(array(
      'Bucket'     => 'mybucketname',
      'Key'        => $newFileName,
      'SourceFile' => $_FILES["theFile"]["tmp_name"],
    ));

    // We can poll the object until it is accessible
    $s3Client->waitUntil('ObjectExists', array(
      'Bucket' => 'mybucketname',
      'Key'    => $newFileName
    ));

  }

}


$iterator = $s3Client->getIterator('ListObjects', array(
  'Bucket' => 'mybucketname'
));

echo "<table><tr><th>Object</th><th>Plain URL</th><th>Signed URL</th></tr>";
foreach ($iterator as $object) {
  // Get a plain URL for an Amazon S3 object
  $plainUrl = $s3Client->getObjectUrl('mybucketname', $object['Key']);

  // Get a command object from the client and pass in any options
  // available in the GetObject command (e.g. ResponseContentDisposition)
  $command = $s3Client->getCommand('GetObject', array(
  'Bucket' => 'mybucketname',
  'Key' => $object['Key'],
   'ResponseContentDisposition' => 'attachment; filename="'.$object['Key'].'"'
  ));

  // Create a signed URL from the command object that will last for
  // 10 minutes from the current time
  $signedUrl = $command->createPresignedUrl('+10 minutes');

  echo "<tr><td>".$object['Key']."</td><td>".$plainUrl."</td><td>".$signedUrl."</td></tr>";
}
echo "</table>";

... upload form here

的CSS：

<div class="cover-section">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 info-section">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-md-6 cover-block"></div>
        </div>
    </div>
</div>

我尝试使用

.info-section {
background-color: red;
padding: 100px 40px;
border: none;
}

.cover-block {
background: url(../images/2.jpg) center no-repeat;
background-size: cover;
height: 500px;
}

但它不起作用

Answer 1

试试这个它使用flexbox。

检查代码段

＆＃13;

.row-eq-height {
  display: flex;
}
.info-section {
background-color: red;
}
.cover-block {
background-color: yellow;
}

＆＃13;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


<div class="cover-section">
    <div class="container-fluid">
        <div class="row row-eq-height">
            <div class="col-xs-6 col-md-6 info-section" >
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="col-xs-6 col-md-6 cover-block"></div>
        </div>
    </div>
</div>

＆＃13;

设置2个div的相等高度

1 个答案: