第二个 Instagram 按钮的 CSS 属性

Question

TopTTeDHbIu-DeJLbFuH4uk

Asked:2023-10-28 15:10:36 +0000 UTC2023-10-28 15:10:36 +0000 UTC 2023-10-28 15:10:36 +0000 UTC

图片卡上的压痕异常

772

在屏幕截图中，我用箭头显示了不规则之处。其他卡都正常。另外，当进行房屋搜索时，该异常区域被转移到另一个地方，而其他所有区域的行为都与预期一致，为什么这张特定的卡有这种行为？怎么修？

HTML：

<div class="main-container-trading">
<div class="container-modal-row">
    <div class="modal-row-text">модельный ряд lofthaus</div>
    <div class="container-btn-params">
        <div class="btn-params-text">Подбор дома
            <div class="container-svg-icon-params">
                <svg></svg>
            </div>
        </div>
    </div>
    <!--  Modal window selection house  -->
    <div class="container-modal-window-selection-house">
        <button class="svg-icon-close-modal-window-selection-house">
            <svg></svg>
        </button>
        <div class="modal-window-selection-house">
            <div class="price-selection-house">цена, ₽</div>
            <div class="container-select-prices">
                <div class="input-label">
                    <div class="from-to">от</div>
                    <input class="input filter-input" type="number" placeholder="1 000 000" id="price-from">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите цену от</div>
                </div>
                <div class="input-label">
                    <div class="from-to">до</div>
                    <input class="input filter-input" type="number" placeholder="15 000 000" id="price-to">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите цену до</div>
                </div>
            </div>
            <div class="square-selection-house">площадь, м2</div>
            <div class="container-select-square">
                <div class="input-label">
                    <div class="from-to">от</div>
                    <input class="input filter-input" type="number" placeholder="50" id="area-from">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите площадь от</div>
                </div>
                <div class="input-label">
                    <div class="from-to">до</div>
                    <input class="input filter-input" type="number" placeholder="250" id="area-to">
                    <div class="filter-invalid-msg hidden-filter-invalid-msg">Введите площадь до</div>
                </div>
            </div>
            <div class="container-btn-apply">
                <div class="btn-apply">Применить</div>
            </div>
            <div class="container-btn-reset hidden-btn-reset">
                <div class="btn-reset">Сбросить</div>
            </div>
        </div>
    </div>
    <!--  Modal window selection house  -->
</div>
<section class="container-items">
    <template>
    <div class="item">
        <img src="" alt="item-1">
        <div class="item-details">
            <div class="model-house"></div>
            <div class="container-info">
                <div class="price-house"></div>
                <div class="size-house"></div>
            </div>
            <div class="container-buttons">
                <div class="btn-more-detailed">
                    <div class="btn-style-more-detailed">Подробнее</div>
                </div>
                <div class="btn-presentation">
                    <div class="btn-style-presentation">Презентация
                        <div class="container-svg-icon-pdf">
                            <svg></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </template>
</section>
<div class="container-show-all-houses">
    <button class="show-all-houses">+ Все дома</button>
</div>
<div class="no-results-message hidden-message">По вашему запросу дома не найдены. Попробуйте изменить параметры и повторить поиск заново.</div>

CSS：

    .main-container-trading {
    background-color: #6a6a6a;
    padding-left: 145px;
}


.container-modal-row {
    position: relative;

    display: flex;
    justify-content: space-between;

    border-left: 1px solid #b0b0b0;
    border-right: 1px solid #b0b0b0;
    border-bottom: 1px solid #b0b0b0;

    padding: 80px 40px 50px 150px;
    margin-right: 146px;
}

.modal-row-text {
    color: white;
    font-size: 40px;
    font-weight: 400;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 83px;
}

.container-btn-params {
    display: flex;
    align-self: center;
    height: 40px;
    width: 220px;

    border: 1px solid #c8b197;
    border-radius: 50px;

    transition: all .3s ease-in-out;

    cursor: pointer;
}

.container-btn-params:hover {
    transition: all .3s ease-in-out;
    border: 1px solid #8a7565;
}

.btn-params-text {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;

    color: white;
    font-size: 20px;
    font-weight: 400;
    font-family: sans-serif;
    line-height: 29px;
}

.container-svg-icon-params {
    display: flex;
    height: 100%;
    align-items: center;
}

.container-modal-window-selection-house {
    position: absolute;
    right: 40px;
    top: 165px;

    width: 450px;
    background-color: #ffffff;
}

.svg-icon-close-modal-window-selection-house {
    position: absolute;
    right: 5px;
    top: 10px;

    border: none;
    background: transparent;

    display: flex;
    width: fit-content;
    height: fit-content;

    cursor: pointer;
}

.modal-window-selection-house {
    padding-top: 25px;
    padding-left: 30px;
    margin-right: 30px;
    margin-bottom: 25px;
}

.price-selection-house {
    font-family: sans-serif;
}

.container-select-prices {
    display: flex;
    gap: 10px;
    width: 100%;
    padding-top: 5px;
}

.input-label {
    display: flex;
    flex-direction: column;
}

.from-to {
    margin-bottom: 3px;

    color: #b7b7b7;
    font-family: sans-serif;
    cursor: default;
}

.input {
    width: 170px;
    border: none;
    outline: none;
    background-color: #e2e2e2;
    padding: 5px 10px;
}

.hidden-filter-invalid-msg {
    display: none;
}

.filter-invalid-msg {
    color: #ff0000;
    font-family: sans-serif;
    font-size: 14px;
    padding-top: 5px;
}

.square-selection-house {
    padding-top: 25px;
    font-family: sans-serif;
}

.container-select-square {
    display: flex;
    gap: 10px;
    padding-top: 5px;
    margin-bottom: 20px;
}

.container-btn-apply {
    width: 100%;
    height: 40px;
    background-color: #c8b197;

    cursor: pointer;
}

.btn-apply {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
}

.container-btn-reset {
    display: flex;
    justify-content: center;
    width: 100%;

    padding-top: 15px;

    cursor: pointer;
}

.hidden-btn-reset {
    display: none;
}

.btn-reset {
    color: #000000;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
}


.container-items {
    display: flex;
    flex-wrap: wrap;
    border-right: 1px solid #b0b0b0;
    border-left: 1px solid #b0b0b0;
}

.item {
    display: flex;
    flex-direction: column;

    max-width: 536px;
    background-size: cover;
    border-right: 1px solid #b0b0b0;
}

.item > img {
    max-width: 100%;
    max-height: 100%;
}

.item-details {
    display: flex;
    flex-direction: column;
    padding: 40px 40px;
    border-bottom: 1px solid #b0b0b0;
}

.model-house {
    font-size: 36px;
    line-height: 49px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: white;
    font-weight: 400;
    font-family: sans-serif;

    transition: all 0.3s ease;

    cursor: pointer;
}

.model-house:hover {
    transition: all 0.3s ease;
    color: #c8b17a;
}

.container-info {
    display: flex;
    justify-content: space-between;
}

.price-house {
    display: flex;
    justify-content: space-between;

    color: white;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 75px;
    font-size: 36px;
}

.size-house {
    color: #DE0D0D;
    font-weight: 700;
    line-height: 78px;
    font-size: 36px;
    font-family: sans-serif;
}

.container-buttons {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
}

.btn-more-detailed {
    width: 150px;
    height: 55px;
    border: 3px solid #c8b197;

    cursor: pointer;
}

.btn-style-more-detailed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 18px;
    text-transform: uppercase;

    transition: all .3s ease-in-out;
}

.btn-more-detailed:hover .btn-style-more-detailed {
    transition: all .3s ease-in-out;
    background-color: #c8b197;
    color: #000000;
}

.btn-presentation {
    background-color: #c8b197;
    width: 205px;
    height: 60px;

    cursor: pointer;
}

.btn-style-presentation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 10px;

    color: #000000;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 18px;
}

.container-svg-icon-pdf {
    display: flex;
}


.container-show-all-houses {
    text-align: center;
    margin-right: 146px;

    padding-top: 40px;
    border-left: 1px solid #b0b0b0;
    /*border-top: 1px solid #b0b0b0;*/
    border-right: 1px solid #b0b0b0;
}

.show-all-houses {
    background: transparent;
    border: none;
    padding: 0;

    margin-bottom: 30px;

    font-weight: 400;
    font-size: 18px;
    line-height: 19px;
    font-family: sans-serif;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;

    transition: all .3s ease-in-out;

    cursor: pointer;
}

.show-all-houses:hover {
    transition: all .3s ease-in-out;
    border-bottom: 1px solid #c8b197;
    color: #c8b197;
}

.hidden {
    display: none;
}


.no-results-message {
    padding: 40px 35px;
    margin-right: 146px;
    text-align: center;

    border-left: 1px solid #b0b0b0;
    border-right: 1px solid #b0b0b0;

    color: #ffffff;
    font-family: sans-serif;
}

.hidden-message {
    display: none;
}

JS：

const allHouses = [
    {
        id: 1,
        title: 'LOFTHAUS R70',
        price: 4465000,
        area: 70,
        img: 'https://topttedhbiu-dejlbfuh4uk.github.io/Layout_LoftHouse/images/item-1.jpg',

    },
// Добавьте тут ещё 10 домов, на меня кричат из-за спама
];

const containerBtnApplyEl = document.querySelector('.container-btn-apply');
const containerBtnResetEl = document.querySelector('.container-btn-reset');
const filterInputEls = [...document.querySelectorAll('.filter-input')];
const filterInvalidMsgEls = [...document.querySelectorAll('.filter-invalid-msg')];
const templateEl = document.querySelector('section > template');
const containerItemEls = document.querySelector('.container-items');

const addPointToNumber = (house) => {
    house.price = new Intl.NumberFormat('ru-RU', {}).format(house.price).replace(/\s/g, '.');
};

const renderHouse = (house, index) => {
    const houseTemplate = templateEl.content.firstElementChild.cloneNode(true);

    if (index >= 9) {
        houseTemplate.classList.add('hidden');
    }

    houseTemplate.querySelector('img').src = house.img;
    houseTemplate.querySelector('.model-house').innerText = house.title;
    addPointToNumber(house);
    houseTemplate.querySelector('.price-house').innerText = `${house.price} ₽`;
    houseTemplate.querySelector('.size-house').innerText = `${house.area}м2`;

    containerItemEls.append(houseTemplate);
};

allHouses.forEach((house, index) => {
    renderHouse(house, index);
});

const showAllHousesEl = document.querySelector('.show-all-houses');
const hiddenHouseEls = [...document.querySelectorAll('.hidden')];
const containerShowAllHousesEl = document.querySelector('.container-show-all-houses');
const buttonEl = document.querySelector('.container-show-all-houses > button');

showAllHousesEl.addEventListener('click', () => {
    hiddenHouseEls.forEach(hiddenHouse => {
        hiddenHouse.classList.remove('hidden');
    });
    buttonEl.remove();
    containerShowAllHousesEl.classList.remove('container-show-all-houses');
});

const clearContainerItemEls = () => {
    [...containerItemEls.children].forEach(el => el.remove());
};

const getHouses = (filters) => {
    const response = allHouses.filter(house => {

        // house.price = house.price.replace(/\./g, '');
        // house.price = parseInt(house.price, 10);

        for (const filterKey in filters) {
            const filterVal = filters[filterKey];
            switch (filterKey) {
                case 'price': {
                    if (house.price < filterVal.from) return false;
                    if (house.price > filterVal.to) return false;
                    break;
                }
                case 'area': {
                    if (house.area < filterVal.from) return false;
                    if (house.area > filterVal.to) return false;
                    break;
                }
            }
        }
        return true;
    });
    return response.length ? response : null;
};

const isValidFilterInputEl = (filterInputEl) => {
    return !!filterInputEl.value || filterInputEl.value === 0;
};

const validateFilterInputEl = (filterInputEl) => {
    const isValid = isValidFilterInputEl(filterInputEl);
    filterInputEl.filterInvalidMsgEls.classList.toggle('hidden-filter-invalid-msg', isValid);
    return isValid;
};

filterInputEls.forEach((filterInputEl, index) => {
    filterInputEl.filterInvalidMsgEls = filterInvalidMsgEls[index];

    filterInputEl.addEventListener('input', () => {
        validateFilterInputEl(filterInputEl);
    });
});

const applyElClickHandler = () => {

    filterInputEls.forEach(filterInputEl => {
        if (!validateFilterInputEl(filterInputEl)) {
            return false;
        }
    });

    const filters = {};
    filterInputEls.forEach(filterInputEl => {
        const [filterKey, filterSubKey] = filterInputEl.id.split('-');
        const filter = filters[filterKey] = filters[filterKey] || {};
        filter[filterSubKey] = filterInputEl.value;
    });

    const houses = getHouses(filters);

    clearContainerItemEls();
    buttonEl.remove();
    containerShowAllHousesEl.classList.remove('container-show-all-houses');

    if (!houses) {
        const noResultsMessageEl = document.querySelector('.no-results-message');
        noResultsMessageEl.classList.remove('hidden-message');
        return false;
    }

    houses.forEach(house => {
        renderHouse(house);
    });
};

1 个回答

Voted

MRGRD56 · Answer 1 · 2023-10-29T00:59:30Z

你的照片有不同的高度。因此，卡片的高度可能会有所不同。

页面图片尺寸：
1 - 536x301.5
2 - 536x301.77
3 - 536x300.38 <- 低于其他图片

您可以对齐它们的高度，例如，通过在 HTML 中添加 img 的包装器：

<div class="item-img-wrapper"> <!-- Добавялем wrapper -->
    <img src="" alt="item-1">
</div>

并替换当前样式：

.item > img {
    max-width: 100%;
    max-height: 100%;
}

至以下内容：

.item-img-wrapper > img {
    width: 100%; /* меняем max-width на width для того, чтобы изображение максимально растягивалось */
    height: 100%;
    object-fit: cover; /* для того, чтобы изображение вписывалось в обёртку */
}

.item-img-wrapper {
    max-width: 100%; /* чтобы изображение и обёртка были не шире родительского контейнера */
    aspect-ratio: 1.8;
}

aspect-ratio这里用于设置图像的等比例。您还可以用包装器高度的显式指示来替换此属性

这样页面上的图片将具有相同的比例。

图片卡上的压痕异常

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

图片卡上的压痕异常

1 个回答

相关问题