Question

有一个网站

特征名称与其值之间必须有 2 个空格。我给代码

// такой же код, что и код выше - только для черных пунктов меню типа Моноблоки 
        let categoryflag='';
            $('.submenu__title a').on('click', function (event) {
                event.preventDefault();
                console.log('Inner check');             
                categoryflag=event.target.innerHTML;
                subcategoryflag=categoryflag;
                console.log(categoryflag);
                $.ajax ({
                    method: 'POST',
                    url: '../php/ajaxsubcategory1.php',
                    cache: false,                   
                    data: {categoryflag: categoryflag, subcategoryflag: subcategoryflag},
                    dataType: 'json',
                    complete: function(data) {
                        console.log(data.header);
                        console.log(data.countrecords);
                    },
                    success: function (data) {
                        console.log('check');
                        console.log(data);
                        $('.rightmenu').html(data.result.msg);
                        let centeroutput='<div id=\"topcenterarea\">'+'<h1>'+data.result.header+' '+data.result.countrecords+' товара' + data.output[0]['screendiagonal'] + '</h1>'+'</div>';
                        
                        
                        productcardsoutput='';
                        // productcard='<div class="ProductCardBlock">';
                        
                        
                        for (let i=0; i<data.result.countrecords; i++)
                            {
                                productcard='<div class="ProductCardBlock">';
                                productcard+='<div class="dynamic ProductImage">';
                                productcard+='<div id="ImageWrapper">';
                                productcard+='<img class="ProductPicture" src='+'"../images/'+data.output[i]['imagepath']+'">';
                                productcard+='</div>';
                                productcard+='</div>';
                                productcard+='<div class="dynamic ProductDescription">';
                                productcard+='<div class="ProductName">' + data.output[i]['monoblockname'] +', ' + data.output[i]['color']+ '</div>';
                                productcard+='<div class="ProductScreenParamsWrapper">'+ '<div class="text">' + 'Диагональ/разрешение    ' + '</div>' + '<div class="spaces">' + '  '  + '</div>' + '<div class="ProductScreenParams">' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' +'</div>'+'</div>';
                                productcard+='<div class="ProductCpuTypeWrapper">'+ '<div class="text">' + 'Тип процессора    ' + '</div>' + '<div class="spaces">' + '  '  + '</div>' + '<div class="ProductCpuType">'+ data.output[i]['cputype'] +'</div>' +'</div>';
                                productcard+='<div class="ProductCpuFrequencyWrapper">'+ '<div class="text">'+ 'Частота процессора    ' +'</div>'+'<div class="spaces">' + '  '  + '</div>'+ '<div class="ProductCpuFrequency">' + data.output[i]['frequency'] +'</div>'+'</div>';
                                productcard+='<div class="ProductRAMWrapper">' + '<div class="text">' + 'Оперативная память (RAM)    ' + '</div>' + '<div class="spaces">' + '  '  + '</div>' + '<div class="ProductRAM">' + data.output[i]['ramsize']  +'</div>'+'</div>';
                                productcard+='<div class="ProductVideoCardWrapper">' + '<div class="text">'+'Графический контроллер    '+'</div>' + '<div class="spaces">' + '  '  + '</div>' + '<div class="ProductVideoCard">' + data.output[i]['videocard']  +'</div>'+'</div>';
                                
                                if (data.output[i]['memorytype']=='SSD') {
                                    productcard+='<div class="ProductDisksAndDrivesWrapper">' + '<div class="text">' + 'Объем SSD    ' + '</div>' + '<div class="spaces">' + '  '  + '</div>' +'<div class="ProductDisksAndDrives">' + data.output[i]['sizememorydata']  +'</div>'+'</div>';
                                }
                                else if (data.output[i]['memorytype']=='HDD') {
                                    productcard+='<div class="ProductDisksAndDrivesWrapper">' + '<div class="text">' + 'Объем HDD    ' + '</div>' + '<div class="spaces">' + '  '  + '</div>' + '<div class="ProductDisksAndDrives">' +  data.output[i]['sizememorydata']  +'</div>'+'</div>';
                                };
                                
                                productcard+='</div>';
                                productcard+='<div class="dynamic ProductBuyPart">'+ '<button type="submit" class="ProductAddToBasket" value="В корзину"></button>' +'</div>';
                                // productcard+='<div class="ProductScreenParams">'+ 'Диагональ/разрешение ' + data.output[i]['screendiagonal'] + '/' + data.output[i]['resolution'] + 'пикс.' +'</div>';
                                
                                
                                // productcard+='</div>';
                                // productcard+='</div>';
                                // productcard+='</div>';
                                // productcard+='</div>';
                                productcard+='</div>';
                                productcardsoutput+=productcard;
                            }
                        
                        centeroutput+=productcardsoutput;
                        
                        /*$('.centerarea').html('<div id=\"topcenterarea\">'+'<h1>'+data.header+' '+data.countrecords+' товара'+'</h1>'+'</div>');*/ 
                        $('.centerarea').html(centeroutput);

                        //expandCollapsedFunction();
                }
            }
            );
        }
        );

.text {
    font: 14px Roboto,Helvetica,Arial,sans-serif;
    /*margin-bottom: 5px;*/
    /*align-items: stretch;*/
}

.ProductCardBlock {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    height: 168px;
    /*position: relative;*/
}

.ProductCardBlock .ProductImage {
    /*width: calc(191.5/931.75)*100%;*/
    /*width: 20%;*/
    height: 100%;
    /*position: absolute;*/
    width: 220px;
}

.ProductCardBlock .ProductImage #ImageWrapper .ProductPicture {
    margin-left: 15px;
    margin-top: 20px;
    margin-right: 5px;
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription {
    /*width: 70%;*/
    margin-top: 20px;
    font: 14px Roboto, Tachoma, Arial, sans-serif;
    /*position: absolute;*/
    /*flex: 6;*/
}

.ProductCardBlock .ProductDescription .ProductName {
    margin-bottom: 15px;
    font: 16px Roboto, Tachoma, Arial,sans-serif;
    /*position: absolute;*/
}

.ProductScreenParams,
.ProductCpuType,
.ProductCpuFrequency,
.ProductRAMWrapper,
.ProductVideoCard,
.ProductDisksAndDrives {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
}




.ProductCardBlock .ProductDescription .ProductScreenParamsWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    padding-bottom: 0px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductCpuTypeWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductCpuFrequencyWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductRAMWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductVideoCardWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

.ProductCardBlock .ProductDescription .ProductDisksAndDrivesWrapper {
    font: 14px Roboto, Tachoma, Arial,sans-serif;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;  
    /*position: absolute;*/
}

/*.ProductCardBlock */.ProductBuyPart {
    margin-top: auto;
    margin-bottom: auto;
    padding-top: auto;
    padding-bottom: auto;
    margin-right: 40px;
    /*margin-left: 40px;*/
    /*padding-right: 40px;*/
    /*width: 10%;*/
    /*position: absolute;*/
    /*display: block;*/
    /*flex: 4;*/
    /*width: auto;*/
}

/*.ProductCardBlock .ProductBuyPart */.ProductAddToBasket {
    /*margin: auto;
    padding: auto;*/
    width: 80px;
    height: 40px;
    /*position: absolute;*/
}

尽管有代码，但没有空格。尽管事实上元素 <div class="text">'...</div> 内有空格，并且尽管事实上有一个 flex 元素的空格 <div class="spaces">' + ' ' + </div>。为方便起见，这里是代码 https://jsfiddle.net/vladdvin/4stpny16/。如何显示空白？

(镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容contentballast内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容镇流器内容）。

弹性项目之间没有空间

0 个答案: