css - シンプルな CSS スタイル - div の配置

Question

これは CSS に関する非常に単純な質問です。写真に描かれているスタイルを取得したいので、次のコードを試しました：

#parent {
    overflow: hidden;
text-align:center;
}
.navbar {
position:absolute;
top:0px;
right:3px;  
}
.logo {
float:left;
}
.table {
float:left;
}

しかし、それは私にはうまくいきません。

Answer 1

試す：

#parent {
overflow: hidden;
text-align:center;
margin:auto;
width:80%;
}
.navbar {
position:absolute;
top:0px;
right:3px;  
}
.logo {
float:left;
}
.table {
float:left;
}

margin:auto目的を達成するには、 を使用して親の仕切りを中央に配置し、 を使用して流動的な幅を配置する必要がありますwidth:80%。

Answer 2

親要素に明示的な幅を与えてから、そこから配置します。

#parent {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

.navbar {
  position: absolute;
  top: 0;
  right: 3px;
}

.logo {
  margin-bottom: 20px;
  display: inline-block;
}

.table {
   width: 100%;
 }

ページに他にどのようなコンテンツがあるかはわかりませんが、デフォルトの HTML フローを使用して、.logo 要素を必要な場所に表示する必要があります。テーブルが 100% の場合はクリアされます。フロートなしでこれをやってのけることができるはずです。