Question

我试图在元素之间添加间距，但是这样做，我的最后一个img移动到下一列。如何自动调整它们以使它们都保持在同一行？

＆＃13;

.column {
  float: left;
  width: 33.33%;
  padding:5px;
}

＆＃13;

<div id="thumbsWrapper">
  <div><img class="column" src="https://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="codepen"></div>
  <div><img class="column" src="https://www.w3schools.com/w3css/img_fjords.jpg" alt="codepen"></div>
  <div><img class="column" src="https://static.pexels.com/photos/247932/pexels-photo-247932.jpeg" alt="codepen"></div>
</div>

＆＃13;

Answer 1

有两种方法可以做到这一点。问题在于public function beforeAction($action) { $exception = Yii::$app->getErrorHandler()->exception; if(parent::beforeAction($action)) { if($action->id == 'error') { if($exception !== NULL) { echo $exception->statusCode; return false; } } } return true; }，因为填充已添加到宽度，因此它们实际上不是padding，而是33.333%。

要解决此问题，您需要将33.333% + 6px属性更改为box-sizing。这在计算元素的宽度时会考虑填充。

第一种方法是，我将图像的填充移动到它的容器中。这是个人偏好，因为向border-box元素添加填充对我来说似乎很奇怪。

第二种方式是如何拥有它，只需将img属性添加到box-sizing: border-box类。

img.column

div.column {
  box-sizing: border-box;
  padding: 3px;
  float: left;
  width: 33.33%;
}

div.column img {
  width: 100%;
  height: 100%;
}


/* Original Way */
img.column {
  box-sizing: border-box;
  padding: 3px;
  float: left;
  width: 33.33%;
}

您可以使用<div id="thumbsWrapper"> <div class="column"><img src="http://placehold.it/300x500" alt="codepen"></div> <div class="column"><img src="http://placehold.it/300x500" alt="codepen"></div> <div class="column"><img src="http://placehold.it/300x500" alt="codepen"></div> </div>  <div id="thumbsWrapper"> <div><img class="column" src="http://placehold.it/300x500" alt="codepen"></div> <div><img class="column" src="http://placehold.it/300x500" alt="codepen"></div> <div><img class="column" src="http://placehold.it/300x500" alt="codepen"></div> </div>作为评论指出，但对您所需要的内容可能过度。

Answer 2

使用Flexbox，这是一个例子。您可以在private AudioManager mAudioManager; boolean mAudioFocusGranted = false; private AudioManager.OnAudioFocusChangeListener mOnAudioFocusChangeListener = new AudioManager.OnAudioFocusChangeListener() { @Override public void onAudioFocusChange(int focusChange) { switch (focusChange) { case AudioManager.AUDIOFOCUS_GAIN: mediaPlayer.start(); MusicButton.setChecked(false); break; case AudioManager.AUDIOFOCUS_GAIN_TRANSIENT: mediaPlayer.start(); MusicButton.setChecked(false); break; case AudioManager.AUDIOFOCUS_GAIN_TRANSIENT_MAY_DUCK: mediaPlayer.start(); MusicButton.setChecked(false); break; case AudioManager.AUDIOFOCUS_LOSS: mediaPlayer.pause(); MusicButton.setChecked(true); break; case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT: mediaPlayer.pause(); MusicButton.setChecked(true); break; case AudioManager.AUDIOFOCUS_LOSS_TRANSIENT_CAN_DUCK: mediaPlayer.setVolume(0.2f,0.2f); break; } } }; SuppressLint({"CommitPrefEdits", "Assert"}) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MusicButton = findViewById(R.id.toggleButton); mAudioManager = (AudioManager)getApplicationContext().getSystemService(Context.AUDIO_SERVICE); if (result == AudioManager.AUDIOFOCUS_REQUEST_GRANTED) { mAudioFocusGranted = true; } else if (result == AudioManager.AUDIOFOCUS_REQUEST_FAILED) { MusicButton.setChecked(true); mediaPlayer.pause(); } }类中提供填充。

.inner

#thumbsWrapper {
  display: flex;
}

.inner {
  flex: 1;
  padding: 10px;
}

img {
  width: 100%;
}

添加保证金但保持行

2 个答案: