在井面R水平对齐文本和图像

时间:2016-11-03 09:41:57

标签: r shiny panel

我使用图像和文本块在Shiny中构建了一个wellpanel。我将它们放在单独的列中,并期望它们彼此相邻。否则闪亮的想法,并拒绝调整它们。文字似乎与图像不同,我不明白为什么会这样做。

enter image description here

ui <- fluidPage(
  wellPanel(
    fluidRow( 
      column(3, img(height = 105, width = 300, 
                    src = "logo_pcfruit.jpg")),
      column(9, offset = 3,
        p("De perenbladvlo vormt één van de voornaamste perenplagen in Europa. 
        Perenbladvlooien voeden zich met plantensap dat ze uit bladknoppen en jonge scheuten zuigen. 
        Deze zuigactiviteit leidt tot directe schade aan perenbomen onder de vorm van bladmisvorming en groeiremming. 
        Het teveel aan suikers dat ze uit het plantensap opnemen, scheiden perenbladvlooien -net als bladluizen- uit als honingdauw. 
        "),
        p("Perenbladvlooien overwinteren als adult en leggen vroeg in het jaar een eerste generatie eitjes. 
        De uitgekomen larven doorlopen 5 stadia alvorens ze een laatste keer vervellen tot adult en op hun beurt eitjes leggen. 
        "), 
      )
    )
  )
)

(对不起,大文​​字输入,但其他布局不太明确。)

我对CSS和HTML没有任何经验,所以一个闪亮的解决方案会很好。如果不可能,那么CSS或HTML就可以了。

上周我发布了一个关于这个标题牌的类似问题。 我现在认为这两种情况都是由同一个问题引起的,但是哪个呢?

1 个答案:

答案 0 :(得分:1)

我自己弄明白:问题是offset中的column()参数。没有它,图像和文本很好地对齐。 titlePanel问题的答案相同。

ui <- fluidPage(
  wellPanel(
    fluidRow( 
      column(3, img(height = 105, width = 300, src = "logo_pcfruit.jpg")),
      column(9,
        p("De perenbladvlo vormt één van de voornaamste perenplagen in Europa. 
        Perenbladvlooien voeden zich met plantensap dat ze uit bladknoppen en jonge scheuten zuigen. 
        Deze zuigactiviteit leidt tot directe schade aan perenbomen onder de vorm van bladmisvorming en groeiremming. 
        Het teveel aan suikers dat ze uit het plantensap opnemen, scheiden perenbladvlooien -net als bladluizen- uit als honingdauw. 
        "),
        p("Perenbladvlooien overwinteren als adult en leggen vroeg in het jaar een eerste generatie eitjes. 
        De uitgekomen larven doorlopen 5 stadia alvorens ze een laatste keer vervellen tot adult en op hun beurt eitjes leggen. 
        "), 
      )
    )
  )
)

enter image description here

(编辑:我使用的截图不同于我在问题中的截图,不同的框大小不是一个缺陷)