Question

我正在尝试使用常规CSS显示属性（块，内联..）而不是使用flex或grid来创建以下布局。

最重要的东西（bandeau）的高度应为100px，水平边距应为50px。

左右列的宽度都应为100px。

页脚thingy（pied）的高度应为80px，水平边距为75px。

body {
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100%;
}

.bandeau {
  height: 100px;
  background: white;
  margin: 0 50px;
}

.menuGauche {
  width: 50px;
  background: lightblue;
  height: calc(100% - 80px);
  margin: 0 0 80px 0;
  position: absolute;
}

.ecran {
  background: lightgreen;
  width: calc(100% - 100px);
  height: calc(100% - 80px);
  position: absolute;
  margin: 0 50px;
}

.menuDroite {
  width: 50px;
  background: lightblue;
  height: calc(100% - 80px);
  margin: 0 0 80px 0;
  position: absolute;
  left: calc(100% - 50px);
}

.pied {
  height: 80px;
  background: white;
  margin: 0 75px;
  width: 100%;
  position: absolute;
  bottom: 0;
}

<div class="bandeau"></div>
<div class="menuGauche"></div>
<div class="ecran"></div>
<div class="menuDroite"></div>
<div class="pied"></div>

Answer 1

作为初学者，你应该避免使用绝对定位并学习显示，然后浮动。

现在显示flex会让它变得更容易。

你也可以使用对他们持有的内容有意义的标签。

这是一个通过flex的例子：

＆＃13;

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  background: black;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  display: flex;
}
.bandeau {
  height: 100px;
  background: white;
  margin: 0 50px;
}

.menuGauche {
  width: 50px;
  background: lightblue;
}

.ecran {
  background: lightgreen;
  flex: 1;
}

.menuDroite {
  width: 50px;
  background: lightblue;
}

.pied {
  height: 80px;
  background: white;
  margin: 0 75px;
}

＆＃13;

<header class="bandeau"></header>
<main>
  <div class="menuGauche"></div>
  <div class="ecran">Play the snippet full page or play with:<a href="https://codepen.io/anon/pen/rJMrgz">https://codepen.io/anon/pen/rJMrgz</a>.</div>
  <div class="menuDroite"></div>
</main>
<footer class="pied"></footer>

＆＃13;

这是一个以（{3}}

开头的教程（等等）

（101建议：法国读者https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

Answer 2

当我进行这种布局时，我尝试将它们水平分组，因此两列将包装在另一个div中。类似于：

 ***big push notifications***

private void sendNotification(String path, String fileName) {
    Context context = getBaseContext();
    Intent notificationIntent = new Intent(this, yourActivity.class);
    notificationIntent.setFlags(FLAG_ACTIVITY_CLEAR_TOP | FLAG_ACTIVITY_NEW_TASK);
    notificationIntent.putExtra(Constant.PATH_INTENT_KEY, path);
    notificationIntent.putExtra(Constant.FILENAME_INTENT_KEY, fileName);

    PendingIntent pendingIntent = PendingIntent.getActivity(context, 0  /*Request code */, notificationIntent,
            PendingIntent.FLAG_UPDATE_CURRENT);
    NotificationCompat.BigPictureStyle bigImage = new NotificationCompat.BigPictureStyle();

    Uri defaultSoundUri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);

    NotificationCompat.Builder notificationBuilder = null;
    int notificationId = (int) System.currentTimeMillis();



    notificationBuilder = new NotificationCompat.Builder(context)
            .setSmallIcon(R.drawable.icon)
            .setColor(ContextCompat.getColor(context, R.color.colorPrimary))
            .setContentTitle(tittle)
            .setContentText(fileName)
            .setContentIntent(pendingIntent)
            .setAutoCancel(true)
            .setSound(defaultSoundUri)
            .setPriority(Notification.PRIORITY_DEFAULT)
            .setDefaults(Notification.DEFAULT_LIGHTS | Notification.FLAG_NO_CLEAR);

    File imgFile = new File(path);
    if (imgFile.exists()) {
        Bitmap bitmap = ThumbnailUtils.createVideoThumbnail(imgFile.getAbsolutePath(), MediaStore.Images.Thumbnails.MINI_KIND);
        notificationBuilder.setStyle(bigImage.bigPicture(bitmap));
    }

    NotificationManager notificationManager =
            (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

    notificationManager.notify(notificationId, notificationBuilder.build());
}

我已经使用了浮动并假设中间部分的高度，因为它没有指定。这是一个plunk。希望这有帮助！

Answer 3

您可以在某些元素上使用display:table来获得结果。所以包装你的主要内容，然后将其显示为表格。

＆＃13;

html,
body {
  height: 100%;
}
body{
margin: 0;
padding: 0;
background: black;
}

.bandeau{
    height: 100px;
    background: white;
    margin: 0 50px;
}
.content-wrapper {
    display: table;
    height: calc(100% - 180px);
    width: 100%;
}
.content-wrapper > div{
  display:table-cell;
}

.menuGauche,
.menuDroite{
    width: 100px;
    background: lightblue;
}

.ecran{
    background: lightgreen;
}

.pied{
    height: 80px;
    background: white;
    margin: 0 75px;
}

＆＃13;

<body>

        <div class="bandeau"></div>

    <div class="content-wrapper">
      <div class="menuGauche"></div>
      <div class="ecran"></div>
      <div class="menuDroite"></div>
    </div>

      <div class="pied"></div>

</body>

＆＃13;

如何实现这种简单的盒子布局

3 个答案: