コピペCSS マンション検索におすすめのフレックスボックスのテーブルHTML

1 html
2 CSS
3 実行例
- 3.1 設備/条件

html



<div class="post_detai">
        <div class="post-info">
            <div class="post-price">8800元/月</div>
            <div class="post-includes">管理費 | 水道料 込み</div>
        </div>
        
        <div class="pdetails">
    <div class="pdetail-item">
        <span class="post-label">所在地:</span>
        <span class="post-value">復興路 <a href="#" class="map-button">MAP</a></span>

    </div>
    <div class="pdetail-item">
        <span class="post-label">デポジット:</span>
        <span class="post-value">2ヶ月分</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">最短レント:</span>
        <span class="post-value">3ヶ月〜</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">広さ:</span>
        <span class="post-value">坪</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">建物:</span>
        <span class="post-value"><a href="#">エレベーター</a> / <a href="#">階段</a> / <a href="#">マンション</a></span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">所在:</span>
        <span class="post-value">6F / 12階建</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">間取り:</span>
        <span class="post-value">部屋: 1室 バスルーム: 1室</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">入居:</span>
        <span class="post-value">随時</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">希望:</span>
        <span class="post-value">女性希望 | 学生 | 社会人</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">駐車場:</span>
        <span class="post-value">なし</span>
    </div>
    <div class="pdetail-item">
        <span class="post-label">投稿主:</span>
        <span class="post-value">家主 (中国語、日本語ok)</span>
    </div>
</div>

        
        <div class="post-facilities">
            <h3>設備/条件</h3>
            <p>敷地内ごみ収集場完備 / 料理NG / タバコNG / ペットNG / 短期賃貸ok / 管理人あり</p>
            <p>敷地内ごみ収集場完備 / 料理NG / タバコNG / ペットNG / 短期賃貸ok / 管理人あり</p>
        </div>
    </div>

CSS


.post_detai {
font-size:13px;
    margin: 0 auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
}

.post-info {
    background-color: #f8cfcf;
    padding: 7px;
    text-align: center;
    border-radius: 8px;
}

.post-price {
    font-size: 22px;
    font-weight: bold;
}

.post-includes {
    font-size: 12px;
    color: #000;
    margin-top: 0px;
}

.pdetails, .post-facilities {
    margin-top: 20px;
}

.pdetails p, .post-facilities p {
    margin-bottom: 5px;
    line-height: 1.4;
}



.post-facilities p {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    color: #333;
}




.pdetails {
    margin-top: 20px;
}

.pdetail-item {
    display: flex;
    justify-content: space-between; /* 左右のスペースを均等に */
    margin-bottom: 10px;
}

.post-label {
    font-weight: bold; /* ラベルを太字に */
    color: #333; /* ラベルの色 */
}

.post-value {
    text-align: right; /* 値を右寄せ */
    color: #000; /* 値の色 */
}

.map-button {
    display: inline-block; /* ボタン風にするためにブロック要素化 */
    padding: 3px 8px; /* ボタンの内側の余白を小さくする */
    background-color: #e0e0e0; /* ボタンの背景色をさらに薄いグレーに */
    color: #333; /* ボタンの文字色を少し濃いグレーに */
    border: 1px solid #a9a9a9; /* 薄いボーダーを追加 */
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none; /* 下線を消す */font-size:11px;
    transition: background-color 0.3s, border-color 0.3s; /* 背景色とボーダー色の遷移効果 */
}

.map-button:hover {
    background-color: #ffffff; /* ホバー時の背景色を白に */
    border-color: #a9a9a9; /* ホバー時のボーダー色は薄いまま */
}

実行例

8800元/月

管理費 | 水道料込み

所在地: 復興路 MAP

デポジット: 2ヶ月分

最短レント: 3ヶ月〜

広さ: 坪

建物: エレベーター / 階段 / マンション

所在: 6F / 12階建

間取り: 部屋: 1室バスルーム: 1室

入居: 随時

希望: 女性希望 | 学生 | 社会人

駐車場: なし

投稿主: 家主 (中国語、日本語ok)

設備/条件

敷地内ごみ収集場完備 / 料理NG / タバコNG / ペットNG / 短期賃貸ok / 管理人あり

html

CSS

実行例

設備/条件

コメントを残すコメントをキャンセル

他の人気記事

人気の検索キーワード

全カテゴリー

人気の記事

New Posts

最近の検索ワード

台湾ひとり人旅ガイド

html

CSS

実行例

設備/条件

コメントを残す コメントをキャンセル

他の人気記事

人気の検索キーワード

全カテゴリー

人気の記事

New Posts

最近の検索ワード

台湾ひとり人旅ガイド

コメントを残すコメントをキャンセル