Question

我在左边距有一个图像，右边距有一个图像。我想让这两个元素居中，以便它们在中间相遇。

但是因为我右侧的盒子向右浮动以与左侧对齐，所以我的填充权不能用于推动它。

这是我的代码：

<section id="content1">
  <a href="#"><img src="images/matcha.jpg" alt="pic1" width="300" height="300" /></a>

  <div class="box1">
    <div class="heading1">
      <p>GREEN TEA LOVE</p>
    </div>

    <div class="paragraph1">
      <p>Top Impression Bakery Cafe has been on my go-to list for awhile since I saw their 
        Green Tea Croissant on Instagram. If you know me well you would know that I'm a huge 
        fan of anything Matcha and if anything is Matcha related I've got to try it!</p>
    </div>
  </div>
</section>

CSS：

#content1{
   padding-top:50px;
   padding-bottom:30px;
   width: 960px;
}

.box1{
   width:500px;
   height:300px;
   background:-moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
   border-style:solid;
   float:right;
}

Answer 1

我不确定为什么你需要浮动右边的盒子“将它对齐到左边的”。您可以在图像上使用<?php declare(strict_types = 1); if(php_sapi_name() !== 'cli'){die('this script must run in cli mode.');} $port = 9999; $targetIP = gethostbyname ( 'example.org' ); $targetPort = 80; assert ( false !== filter_var ( $targetIP, FILTER_VALIDATE_IP ) ); var_dump ( $targetIP, $targetPort ); y ( ($listen = socket_create ( AF_INET, SOCK_STREAM, SOL_TCP )) ); register_shutdown_function ( function () use (&$listen) { socket_close ( $listen ); } ); y ( socket_bind ( $listen, '0.0.0.0', $port ) ); y ( socket_listen ( $listen ) ); y ( socket_set_block ( $listen ) ); echo 'listening for connections... ', PHP_EOL; while ( false !== ($newconn = socket_accept ( $listen )) ) { echo 'new connection from '; socket_getpeername ( $newconn, $peername, $peerport ); echo $peername . ':' . $peerport . PHP_EOL; y ( socket_set_block ( $newconn ) ); $data = ''; echo 'reading request... '; $data = socket_read_all ( $newconn, 2 ); var_dump ( $data ); echo 'done.' . PHP_EOL; // client didnt send any bytes in a while, assume we got the whole request... { // do whatever processing you need to do between requests in here. } { // now to forward the request. y ( ($targetSock = socket_create ( AF_INET, SOCK_STREAM, SOL_TCP )) ); y ( socket_set_block ( $targetSock ) ); y ( socket_connect ( $targetSock, $targetIP, $targetPort ) ); echo 'connected to target. forwarding request... '; socket_write_all ( $targetSock, $data ); echo 'done.', PHP_EOL; unset ( $data, $newdata ); $data = ''; echo 'reading response... '; $data = socket_read_all ( $targetSock, 2 ); var_dump ( $data ); echo 'done.', PHP_EOL; socket_close ( $targetSock ); } echo 'sending response back to client... '; socket_write_all ( $newconn, $data ); echo 'done.', PHP_EOL; socket_close ( $newconn ); } function y($in) { if (! $in) { $str = hhb_return_var_dump ( socket_last_error (), socket_strerror ( socket_last_error () ) ); throw new \Exception ( $str ); } return $in; } function n($in) { if (! ! $in) { throw new \Exception (); } return $in; } function hhb_return_var_dump(): string // works like var_dump, but returns a string instead of printing it. { $args = func_get_args (); ob_start (); call_user_func_array ( 'var_dump', $args ); return ob_get_clean (); } function socket_write_all($sock, string $data) { $len = strlen ( $data ); while ( $len > 0 ) { $written = socket_write ( $sock, $data ); if ($written === false) { throw new RuntimeException ( 'socket_write failed. errno: ' . socket_last_error ( $sock ) . '. error: ' . socket_strerror ( socket_last_error ( $sock ) ) ); } $len -= $written; $data = substr ( $data, $written ); } return; // all data written } function socket_read_all($sock, int $sleep_sec = 2): string { $ret = ''; while ( true ) { sleep ( $sleep_sec ); // ... $buf = ''; $read = socket_recv ( $sock, $buf, 9999, MSG_DONTWAIT ); if ($read === false || $read < 1) { return $ret; } $ret .= $buf; } }使它们垂直对齐。为了使它们居中，您只需将vertical-align添加到text-align: center即可。请参阅https://jsfiddle.net/8gkcguwb/1/。

Answer 2

您是否尝试过两种元素#content和.box1

保证金0自动;

Answer 3

在您的父内容部分标记上使用flexbox，删除框中的浮动内容。您可以将justify-content规则更改为space-around，以便可以根据父级的宽度进行分配，也可以在窗口调整大小时使用flex wrap进行分配。

＆＃13;

#content1{
   padding-top:50px;
   padding-bottom:30px;
   width: 100%;
   max-width: 960px;
   display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.box1{
   width:500px;
   height:300px;
   background:-moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%); 
   border-style:solid;
   
}

＆＃13;

<section id="content1">
  <a href="#"><img src="https://placehold.it/300x300" alt="pic1" width="300" height="300" /></a>

  <div class="box1">
    <div class="heading1">
      <p>GREEN TEA LOVE</p>
    </div>

    <div class="paragraph1">
      <p>Top Impression Bakery Cafe has been on my go-to list for awhile since I saw their 
        Green Tea Croissant on Instagram. If you know me well you would know that I'm a huge 
        fan of anything Matcha and if anything is Matcha related I've got to try it!</p>
    </div>
  </div>
</section>

＆＃13;

Fiddle

如何在已经向右浮动时使用填充？

3 个答案: