Блог

Там, где я использую класс div, после каждого оператора if есть разрыв строки, и строки не выровнены.

Как я могу правильно выровнять вывод php, чтобы обе строки были выровнены по горизонтали.

 function display_selected_variation_custom_field_js(){
        ?>
        <script type="text/javascript">
        (function($){
            var a = '.custom_variation-text-field', b = $(a).html();
    
            $('form.cart').on('show_variation', function(event, data) {
                outputHtml = '';
    
                if( data.model ) {
                    outputHtml  = '<div align="left"> <span><strong><?php _e("Model"); ?><strong>: ' data.model '<span></div>';
                }
                if( data.wattage ) {
                    outputHtml  = '<div align="center"><span><strong><?php _e("Wattage"); ?><strong>: ' data.wattage '<span></div>';
                }
                if( data.lumen ) {
                    outputHtml  = '<div align="right"><span><strong><?php _e("Lumen"); ?><strong>: ' data.lumen '<span></div>';
                }
                if( data.material ) {
                    outputHtml  = '<div align="left"><span><strong><?php _e("Material"); ?><strong>: ' data.material '<span></div>';
                }
                if( data.dimension ) {
                    outputHtml  = '<div align="center"><span><strong><?php _e("Dimension"); ?><strong>: ' data.dimension '<span></div>';
                }
                if( data.year ) {
                    outputHtml  = '<div align="right"><span><strong><?php _e("Year"); ?><strong>: ' data.year '<span></div>';
                }
                if( outputHtml ) {
                    $(a).html(outputHtml);
                }
            }).on('hide_variation', function(event) {
                $(a).html(b);
            });
        })(jQuery);
        </script>
 

Текущий вывод:

Ожидаемый результат:

Вы можете предоставить некоторые внешние divs своим данным, потому что ваш код отображает все в отдельной строке, так что это поможет различать их.

Демонстрационный код :

 var a = '.custom_variation-text-field';
//suppose data look like this ..
var data = {
  "model": 13,
  "lumen": "somehtnf",
  "material": 122,
  "dimension": 12,
  "year": 1333,
  "wattage": 33
}

var outputHtml = '';
//give some outer div to differntiate them
var outer = "<div class='outer'>"
if (data.model) {
  outer  = '<div align="left"><span><strong>Model</strong>: '   data.model   '</span></div>';
}
if (data.wattage) {
  outer  = '<div align="center"><span><strong>Wattage</strong>: '   data.wattage   '</span></div>';
}
if (data.lumen) {
  outer  = '<div align="right" ><span><strong>Lumen</strong>: '   data.lumen   '</span></div>';
}
outer  = outputHtml   "</div><div class='outer'>" //close it 
if (data.material) {
  outer  = '<div align="left"><span><strong>Material</strong>: '   data.material   '<span></div>';
}
if (data.dimension) {
  outer  = '<div align="center" ><span><strong>Dimension</strong>: '   data.dimension   '</span></div>';
}
if (data.year) {
  outer  = '<div align="right" ><span><strong>Year</strong>: '   data.year   '</span></div>';
}
outer  = "</div>"
if (outer) {
  $(a).html(outer);
} 

 .outer>* {
  display: inline-block;
  width: 150px;
  height: 30px;
  border-bottom: 2px solid;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom_variation-text-field">

</div> 

Да, <div> по умолчанию являются тегом блока, а не встроенным тегом.

Самый простой способ сделать это — использовать <table> . В настоящее время это не «круто», но это решает проблему. Другой способ — использовать атрибут «float» CSS:

 <div style='clear: both; float: left'>Left side</div>
<div style='float: center'>Center</div>
<div style='float: right'>Right side</div>
 

Вы, вероятно, захотите использовать классы вместо указания CSS, подобного этому.

Обратите внимание, что ваши вторые <strong> и <span>теги должны быть закрывающими тегами: </strong> и</span> , хотя я не уверен, почему <span>они вообще существуют.