1
私は問題があり、私は絶望的です。私は解決策を理解していないようです。私はプログラミングの面白いので、本当に悪いコードの場合は、私と一緒に裸！CSS要素の位置を固定する方法は？
私が達成しようとしていることは次のとおりです。私は、新しいWindowsスタイルに似た、タイルレイアウトのウェブサイトを作成したいと考えています。 https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/jquery4u/2013/03/metro-template.png < - 種類のこのような、私の場合はそれを除い：
- 各タイルは、同じサイズ（正方形）（■）である
- テキストはタイルを中心にする必要があります（.center-ボックスコンテンツ）
- 各タイルは、テキスト（.lower-right-box-content）に加えて、右下隅に2つのボタンを伴う必要があります。 ボタンは編集およびごみアイコンであり、タイルのテキスト変更可能。
私はこれを達成しましたが、問題は次のとおりです。ボタンはテキストの長さに依存するようです。
私はそれらをcssファイルの絶対的な位置に割り当てましたが、そのまま置いていません。
タイル内のテキストが長い場合、それらはタイルの境界線の前後に移動します。これらの境界線を越えてはいけません。それは完全な混乱です。私はすべてを試しましたが、私は解決策を見つけることができません。私は皆さんが見て、私が逃しているものを見ることができると期待していますか？ここに私のCSSのコードは次のとおりです。ここで
.box {
width: 200px;
height: 200px;
margin: 2px;
color: whitesmoke;
float: left;
padding: 7px;
}
.center-box-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lower-right-box-content {
position: absolute;
float: right;
padding: 2px;
bottom: -60px;
right: -5px;
}
.red-box {
background-color: indianred;
}
.blue-box {
background-color: deepskyblue;
}
.green-box {
background-color: mediumseagreen;
}
は私のHTMLコードは次のとおりです。（PHPビットは単なるイベント名、イベントの説明、およびイベントの日付であるデータベースからテキストを読み出す）
<!--the entire square tile -->
<div class="box red-box" height="100%" width="100%">
<!--this centers the text within the tile -->
<div class="center-box-content">
<!--echo the name -->
<b><?php echo $row["title"]; ?></b>
<!--echo the description -->
<?php echo $row["description"]; ?>
<br> • <!--echo the date -->
<?php echo $row["date"]; ?> •
<!--edit and delete button in the lower right corner of the tile -->
<!--this is the part that keeps moving as the text gets longer -->
<div class="lower-right-box-content">
Upcoming Events <span style="display:inline-block; width: 20px;"></span>
<a href="#">
<span class="glyphicon glyphicon-pencil glyphicon-pencil" role="button"> </span>
</a>
<a href="deleteevent.php?id=<?php echo $row["eventid"];?>">
<span class="glyphicon glyphicon-trash glyphicon-trash" role="button"></span>
</span>
</a>
</div>
</div>
</div>
<?php };
?>